作者：ZhuJiongJiongnu_441 | 来源：互联网 | 2022-01-04 17:30
本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考，具体如下：
在路由文件需要守卫的path后面加上meta
{path: '/home',component: home,meta:{requireAuth:true}}
在main.js里面加上
//路由守卫
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(JSON.parse(localStorage.getItem('islogin'))){ //判断本地是否存在access_token
next();
}else {
next({
path:'/login'
})
}
}
else {
next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath == "/login"){
if(JSON.parse(localStorage.getItem('islogin'))){
next({
path:from.fullPath
});
}else {
next();
}
}
});
其中islogin是登录态，就是true or false，true表示登录，false表示未登录，存放在localStorage里面，因为localStorage里面只能存字符串，所以存进去的时候需要localStorage.setItem(‘islogin',JSON.stringify(islogin));将islogin变为String类型，取出来的时候需要将islogin转化为Boolean类型，就比如JSON.parse(localStorage.getItem(‘islogin'))这样。
那么还有一个问题，就是islogin登录态的管理，vue不能实时监测localStorage的变化，需要实时监测islogin的变化来在页面显示登录还是已经登录，我用的是vuex+localStorage来管理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) => {
//传入登录状态islogin
let islogin = JSON.parse(n);
localStorage.setItem('islogin',JSON.stringify(islogin));
console.log(islogin);
state.islogin = islogin;
}
}
}
在需要改变登录态的页面只要触发上面这个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("退出登录");
}
登录注册部分样式参考的element-ui
登录注册
希望本文所述对大家vue.js程序设计有所帮助。
京公网安备 11010802041100号