页面访问权限

页面访问权限

首先通过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
    }
  })
}