在路由文件需要守卫的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("退出登录");
}