vue中路由验证和相应拦截的使用详解

第vue中路由验证和相应拦截的使用详解在web项目中，经常需要根据是否登录进行路由的验证和相应的拦截。

首先，在vuex里的store.js里边写一个存放登录状态，代码如下

importVuefrom'vue'

importVuexfrom'vuex'

Vue.use(Vuex)

exportdefaultnewVuex.Store({

state:{

user:false

mutations:{

//登录

login(state,user){

state.user=user

//退出

logout(state,user){

state.user=false

路由验证：

路由验证用router.beforeEach((to,from,next)={}

这里的to代表要去的路由指向，from是指从哪个路由跳转过来的，next是判断操作，如果为空，表示放行。

比如：下一跳的路由为‘/watchHouse'或者‘/AgentMsg'，如果没有登录的话，通过代码next({path:'/login'})

跳转到登录的界面。代码如下：

if(!store.state.user(to.path==='/watchHouse'||to.path==='/AgentMsg')){

next({path:'/login'})

}

比如：在路由‘/my'下，要跳往‘/ToolCompute'，如果没有登录的话，跳转到登录页面。代码如下：

if(!store.state.user(from.path==='/my')(to.path==='/ToolCompute')){

next({path:'/login'})

全部代码：

router.beforeEach((to,from,next)={

if(to.path==='/login'){

next()

}else{

if(!store.state.user(to.path==='/watchHouse'||to.path==='/AgentMsg')){

next({path:'/login'})

}else{

next()

if(!store.state.user(from.path==='/my')(to.path==='/ToolCompute')){

next({path:'/login'})

需要注意的是，路由验证这个方法函数与vue实例的顺序还有关系。如果写在vue（）的后面，下面就会执行，后判断。

如下图所示：

这样写，当然是可以执行的路由跳转判断的，但是当我们直接在浏览器的地址栏里直接输入我们要跳转的

完整路由信息的时候，这个路由跳转就不会被判断了。如下图所示：

如果把路由验证写到VUE实例的前面，就不会出现这样的问题了，这样就会先进行路由判断，再进行执行实例里边的内容了。

代码顺序如下所示：

响应拦截：比如在根实例中通过checkLogin（）这个方法去判断，登录信息的状态，加入登录超时，则进行响应拦截，代码如下。

varapp=newVue({

el:'#app',

router,

store,

created(){

checkLogin().then(function(res){

if(res.datares.data.code==1){

mit('login',true);