页面访问权限
首先通过router方法的meta 提示消息绑定 一个自定义参数 布尔值,true表示需要权限访问 false表示不需要权限就可以访问
建立前置路由守卫进行判断:
点击几个不同的路由 打印该消息 可以区分权限和不需要权限路由
之后:
第一步判断 如果是访问登录页面的话 直接放行
第二步判断 如果store中的 user 和user的token有这登录信息
有就行放心,没有的 话
进行第三步判断:通过dialog弹出框 提示用户是否进入登录或则否,
如果登录页面的话 那么直接进入登录页面,否则next(false)卡在当前页,
代码如下:
router.beforeEach(async (to, from, next) => {
// to 要访问的路径
// from 从那里来
// next 直接放行
// console.log(to.meta.requireAuth, 22)
// 访问login的话直接放行
if (to.path === '/login') next()
// 1.路由不需要登录才能访问的板块 直接放行 判断true和false
if (!to.meta.requireAuth) return next()
// 2. 查询是否有store里是否有user的token
const { user } = store.state
// 有直接放行
if (user && user.token) return next()
// 没有的话 ,弹框查询是否登录
const r = await Dialog.confirm({
title: '标题',
message: '是否登录?'
}).then(r => r).catch(e => e)
console.log(r)
if (r === 'confirm') {
// 确认登录
redirectLogin()
} else {
// 取消登录·卡在当前页面
next(false)
}
})
// 登录之后 可以重新回到之前浏览的页面
function redirectLogin () {
router.replace({
name: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}