1. 程式人生 > >vue-router專案中的登入驗證問題

vue-router專案中的登入驗證問題

思路:登入的時候,將從後臺拿到的token資訊,使用sessionStorage進行儲存,然後在全域性的導航守衛中

;判斷本地儲存sessionStorage是否是存在token的資訊,如果是存在就可以進行其他導航頁面訪問,不存在的情況下就停留在登入頁面;退出登入的以後,將sessionStorage儲存的資訊進行清空。

步驟一:使用者登入

 this.$axios.post(url,data).then((result) => {
    if(result.code==200){
        sessionStorage.setItem('accessToken', result.data.access_token);
        sessionStorage.setItem(
'userName', result.data.username); this.$router.push('admin') } }

步驟二:vue-router 全域性導航鉤子前置守衛使用

router.beforeEach(function (to,from,next) {
   if (!sessionStorage.getItem('accessToken')) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }   
})