如何在vue-router的beforeEach钩子里做页面访问权限验证

Question

目前的情况是准备把项目里的页面访问权限验证放在vue-router的全局钩子beforeEach里，但是这个权限验证是依赖于vue-store下的某一个变量的。我也有想过把这个变量移动到window下面，但是这样好像不太安全。请问有没有什么比较好的方法？比如说怎样在beforeEach里获取到全局store里的某个变量的值？

Answer 1

一般前端做的话放到sessionStorage里面，通过vuex去管理，直接上代码吧(我项目里'/'是登录页，'/Table'是登录后的首页)

// main.js
router.beforeEach((to, from, next) => {
  if (to.path === '/' && sessionStorage.getItem('accessToken') && from.path !== '/Table'){
    sessionStorage.removeItem('accessToken')
    next()
  }
  else if (to.meta.requiresAuth && !sessionStorage.getItem('accessToken')){
    next(
      {
        path: '/',
        query: {redirect: to.fullPath}
      }
    )
  }
  else if (from.path === '/Table' && to.path === '/'){
    next({
      path: '/Table'
    })
  }
  else{
    next()
  }
})

下面是登录页

  login (){
    var _this = this;
    let params = {}
    params = {
      username: this.username,
      password: this.password
    }
    api.login_in(params).then(data => {
      if (data) {
        this.$store.commit(types.LOGIN_IN, data)
        this.$router.push(this.$route.query.redirect || '/Table');
        Toast({
          message: '登录成功',
          iconClass: 'icon-success',
        })
      }
    })     
  }

然后是store.js

const state = {
  accessToken: null
}

const mutations = {
  [types.LOGIN_IN] (state, data) {
    state.accessToken = data
    sessionStorage.setItem('accessToken', JSON.stringify(data.name))
  },
  [types.LOGIN_OUT] (state, data) {
    state.accessToken = null
  }
}