Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
更新時間：2019年10月31日 14:43:24 作者：北海之靈
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用VueRouter的beforeEach鉤子函數(shù)，可以實現(xiàn)導(dǎo)航跳轉(zhuǎn)前檢查登錄狀態(tài)的需求。
1.在登錄請求接口時返回用戶的信息，比如 userInfo:{userId:'123', userName:'小明'}，登錄成功之后將userInfo存入store中。
2.使用beforeEach實現(xiàn)登錄狀態(tài)檢查
vueRouter.beforeEach((to, from, next) => {
//store的getters中定義獲取用戶信息的函數(shù) getUser
//userId為空說明用戶未登錄
let isLogin = store.getters.getUser.userId;
if (!isLogin) {//未登錄
if (to.path !== '/login') {//跳轉(zhuǎn)到登錄頁
return next({path: '/login'});
}else {
next();
}
}else {//已登錄
if (to.path === '/login') {//跳轉(zhuǎn)到首頁
return next({path: '/index'});
}
next();
}
});
如果需要退出登錄，只需要將保存在store中的用戶信息置空即可。
以上這篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js使用v-model實現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)父子組件間的雙向通信,結(jié)合實例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
VUE中setTimeout和setInterval自動銷毀案例
這篇文章主要介紹了VUE中setTimeout和setInterval自動銷毀案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue實現(xiàn)樹形結(jié)構(gòu)增刪改查的示例代碼
其實很多公司都會有類似于用戶權(quán)限樹的增刪改查功能，本文主要介紹了vue實現(xiàn)樹形結(jié)構(gòu)增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue?Router?返回后記住滾動條位置的實現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹的是vue 如何實現(xiàn)表單校驗的方法，又代碼詳細解說，感興趣的小伙伴可以參考下面文章的具體內(nèi)容2021-09-09
本篇文章主要介紹了Vue的加載順序探討，詳細的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了在vue項目如何使用base64加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會自動的更新屬性中的值，屬性中的值更新了會自動更新表單中的值 ，下面一起進入文章來哦姐文章詳情內(nèi)容2021-10-10
vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式
這篇文章主要介紹了vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3獲取ref實例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實例結(jié)合ts的InstanceType問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03