Vue-router 路由守卫

Vue-router 路由守卫

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

export default new Router({
routes:[{
path: ‘xxx’,
components: xxx,
name: ‘xxx’,
meta: {
requireAuth: false
}
}]
})

然后在main.js中

// 路由拦截器
router.beforeEach((to, from, next) => {
if (to.matched.length != 0) {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (Boolean(localStorage.getItem(“userInfo”))) { // 通过vuex state获取当前的user是否存在
next();
} else {
next({
path: ‘/login’,
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
if (Boolean(localStorage.getItem(“userInfo”))) { // 判断是否登录
if (to.path != “/” && to.path != “/login”) { //判断是否要跳到登录界面
next();
} else {
/**
* 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页
*/
next({
path: ‘/goods/Goods’
})
}
} else {
next();
}
}
} else {
next({
path: ‘/login’,
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
})