vue中怎样实现 路由拦截器
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 方法的调用参数。
浩楠哥