Vue 路由权限控制,只能从登陆页面进入系统
实现这种校验分几个步骤1.设置路由是否需要校验的阈值在路由配置加上meta的判断routes: [{path: '/',name: 'Login',component: () => import('@/pages/login/login')}, {path: '/home',name: 'Home',me...
·
实现这种校验分几个步骤
1.设置路由是否需要校验的阈值
在路由配置加上meta的判断
routes: [{
path: '/',
name: 'Login',
component: () => import('@/pages/login/login')
}, {
path: '/home',
name: 'Home',
meta: {requireAuth: true},
components: {
default: () => import('@/pages/home/home'),
mainheader: MainHeader
}
}]
第二步
设置登录保存状态
let loginstatus = true
this.$store.commit('setRouting', loginstatus)
// 在vuex文件中
loginstatus: sessionStorage.getItem('loginstatus') || false
setRouting (state, loginstatus) {
state.loginstatus = loginstatus
sessionStorage.setItem('loginstatus', loginstatus)
}
这里为什么用sessionStorage存储,而不是localStorage、
因为localStorage是永久的存储,如果用它做判断条件,失去了做权限的意义
sessionStorage当页面关闭后,存储的数据就会消失,适合用来判断是否登录,还有一点,vue项目的是单页面应用,所以可以使用sessionStorage来实现
第三步:
路由登录跳转权限控制
在main.js中设置路由配置
// 配置路由权限
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem('loginstatus')) { // 判断本地是否存在access_token
next()
} else {
// 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。
next({
path: '/',
query:{ referrer: to.fullPath}
})
}
} else {
next()
}
})
ok,完成,在除去登录页面之外的路由都设置meta,就可以实现只能从登录页面登录了。
更多推荐
已为社区贡献21条内容
所有评论(0)