在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何在vue-router的beforeEach鉤子里做頁面訪問權(quán)限驗(yàn)證

如何在vue-router的beforeEach鉤子里做頁面訪問權(quán)限驗(yàn)證

目前的情況是準(zhǔn)備把項(xiàng)目里的頁面訪問權(quán)限驗(yàn)證放在vue-router的全局鉤子beforeEach里,但是這個(gè)權(quán)限驗(yàn)證是依賴于vue-store下的某一個(gè)變量的。我也有想過把這個(gè)變量移動(dòng)到window下面,但是這樣好像不太安全。請(qǐng)問有沒有什么比較好的方法?比如說怎樣在beforeEach里獲取到全局store里的某個(gè)變量的值?

回答
編輯回答
孤巷

一般前端做的話放到sessionStorage里面,通過vuex去管理,直接上代碼吧(我項(xiàng)目里'/'是登錄頁,'/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
  }
}
2017年6月6日 19:18