vue-router專案中的登入驗證問題
阿新 • • 發佈:2019-02-17
思路:登入的時候,將從後臺拿到的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()
}
})