在路由文件需要守衛(wèi)的path后面加上meta
{path:?'/home',component:?home,meta:{requireAuth:true}}
在main.js里面加上
//路由守衛(wèi)router.beforeEach((to,?from,?next)?=>?{??console.log(to);??console.log(from);??if?(to.meta.requireAuth)?{?//?判斷該路由是否需要登錄權(quán)限
????if(JSON.parse(localStorage.getItem('islogin'))){?//判斷本地是否存在access_token
??????next();
????}else?{
??????next({????????path:'/login'
??????})
????}
??}??else?{
????next();
??}??/*如果本地?存在?token?則?不允許直接跳轉(zhuǎn)到?登錄頁(yè)面*/
??if(to.fullPath?==?"/login"){????if(JSON.parse(localStorage.getItem('islogin'))){
??????next({????????path:from.fullPath
??????});
????}else?{
??????next();
????}
??}
});
其中islogin是登錄態(tài)，就是true or false，true表示登錄，false表示未登錄，存放在localStorage里面，因?yàn)閘ocalStorage里面只能存字符串，所以存進(jìn)去的時(shí)候需要localStorage.setItem('islogin',JSON.stringify(islogin));將islogin變?yōu)镾tring類(lèi)型，取出來(lái)的時(shí)候需要將islogin轉(zhuǎn)化為Boolean類(lèi)型，就比如JSON.parse(localStorage.getItem('islogin'))這樣。
那么還有一個(gè)問(wèn)題，就是islogin登錄態(tài)的管理，vue不能實(shí)時(shí)監(jiān)測(cè)localStorage的變化，需要實(shí)時(shí)監(jiān)測(cè)islogin的變化來(lái)在頁(yè)面顯示登錄還是已經(jīng)登錄，我用的是vuex+localStorage來(lái)管理islogin。展示部分代碼
//store.js中import?Vue?from?'vue'import?Vuex?from?'vuex'Vue.use(Vuex)export?default?new?Vuex.Store({??state:{????//是否登錄判斷
????islogin:''
??},??mutations:{????login:(state,n)?=>?{????//傳入登錄狀態(tài)islogin
????let?islogin?=?JSON.parse(n);
????localStorage.setItem('islogin',JSON.stringify(islogin));????console.log(islogin);
????state.islogin?=?islogin;
????}
??}
}
在需要改變登錄態(tài)的頁(yè)面只要觸發(fā)上面這個(gè)login方法就可以了
//這里是登錄
login()?{??
??let?flag?=?true；
? ? this.$store.commit('login',flag);??
??this.$router.push("/home");???
?console.log("登錄成功");
}
//這里是退出登錄
exit()?{??
??let?flag?=?false；?
???this.$store.commit('login',flag);???
?this.$router.push("/login");????
console.log("退出登錄");
}
