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

1. index.js文件

2. PS：route，是一条路由；routes是一组路由；router是一个机制，相当于一个管理者，它来管理路由

3. importVuefrom'vue';

4. importRouterfrom'vue-router';

//要告诉vue使用Router

Vue.use(Router)

//route是一个对象，多个route组成一个routes

constroutes=[

{

path:'/',component:login,name:'login'

},

{

path:'/action',component:action,name:'action',

children:[

{path:'/',component:index,name:'index'},

{path:'index',component:index,name:'index'},

{path:'index_add',component:index_add,name:'index_add'},

{path:'index_alter/:id',component:index_alter,name:'index_alter'},

{path:'product',component:product,name:'product'},

{path:'product_add',component:product_add,name:'product_add'},

{path:'product_alter/:id',component:product_alter,name:'product_alter'},

{path:'news',component:news,name:'news'},

{path:'news_add',component:news_add,name:'news_add'},

{path:'news_alter/:id',component:news_alter,name:'news_alter'},

{path:'aboutUs',component:aboutUs,name:'aboutUs'},

{path:'aboutUs_alter',component:aboutUs_alter,name:'aboutUs_alter'}

]

}

]

//创建router对路由进行管理，由构造函数newRouter()创建，接收routes参数

constrouter=newRouter({

routes:routes//简写：routes

});

2.路由拦截器

PS：判断是否有token值或是否to登录页，是则next()，否则跳转到登录页

exportdefaultrouter

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。
在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收