vue中怎样实现路由拦截器（当用户没有登录的时候，跳转到登录页面，已经登录的时候，不能跳转到登录页，除非后台token失效）

在我们需要实现这样一个功能，登录拦截

其实就是路由拦截，首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。在路由管理页面添加meta字段

router/index.js文件，例如，在用户直接跳转/manage路径下的时候，实现路由拦截

{

path:'/manage',

name:'manage',

component:manage,

meta:{requireAuth:true}

},

我们需要在main.js中加上

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

console.log(to);

console.log(from);

if(to.meta.requireAuth){//判断该路由是否需要登录权限

if(localStorage.getItem('access_token')){//判断本地是否存在access_token

next();

}else{

　　　　　　next({　　　　　　　　path:'login',　　　　　　　　query:{

　　　　　　　　　　redirect:to.fullPath

　　　　　　　　}　　　　　　})

}

}

else{

next();

}

/*如果本地存在token则不允许直接跳转到登录页面*/

if(to.fullPath=="/login"){

if(localStorage.getItem('access_token')){

next({

path:from.fullPath

});

}else{

next();

}

}

});

redirect:to.fullPath用来记录哪里被拦截跳转到登录的，这样登陆完之后可以重新跳转回来这个页面

参数说明：

   *to:Route:即将要进入的目标路由对象    *from:Route:当前导航正要离开的路由    *next:Function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。 

转载于:https://www.cnblogs.com/haonanZhang/p/9371642.html