Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能
更新時(shí)間：2019年10月31日 14:43:24 作者：北海之靈
今天小編就為大家分享一篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
使用VueRouter的beforeEach鉤子函數(shù)，可以實(shí)現(xiàn)導(dǎo)航跳轉(zhuǎn)前檢查登錄狀態(tài)的需求。
1.在登錄請(qǐng)求接口時(shí)返回用戶的信息，比如 userInfo:{userId:'123', userName:'小明'}，登錄成功之后將userInfo存入store中。
2.使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查
vueRouter.beforeEach((to, from, next) => {
//store的getters中定義獲取用戶信息的函數(shù) getUser
//userId為空說(shuō)明用戶未登錄
let isLogin = store.getters.getUser.userId;
if (!isLogin) {//未登錄
if (to.path !== '/login') {//跳轉(zhuǎn)到登錄頁(yè)
return next({path: '/login'});
}else {
next();
}
}else {//已登錄
if (to.path === '/login') {//跳轉(zhuǎn)到首頁(yè)
return next({path: '/index'});
}
next();
}
});
如果需要退出登錄，只需要將保存在store中的用戶信息置空即可。
以上這篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了基于vue-cli的vuex配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue3中通過(guò)遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件
這篇文章主要介紹了vue3中通過(guò)遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
vue 實(shí)現(xiàn)把路由單獨(dú)分離出來(lái)
這篇文章主要介紹了vue 實(shí)現(xiàn)把路由單獨(dú)分離出來(lái)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例
這篇文章主要介紹了Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例,具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖
這篇文章主要為大家介紹了vue.js項(xiàng)目中使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04