Vue-router 路由守卫
在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段。export default new Router({routes:[{path: 'xxx',components: xxx,name: 'xxx',meta: {r...
·
在定义路由的时候就需要多添加一个自定义字段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作为参数,登录成功后跳转到该路由
})
}
})
更多推荐
已为社区贡献18条内容
所有评论(0)