在路由文件需要守卫的path后面加上meta
{
path: '/home',
name: 'home',
component: () =>
import ("./views/Home.vue"),
meta: { requireAuth: true }
},
在router.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: "/home"
});
} 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。展示部分代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
islogin: ""
},
mutations: {
login: (state, n) => {
let islogin = JSON.parse(n)
localStorage.setItem('islogin', JSON.stringify(islogin));
state.islogin = islogin;
}
},
actions: {}
})
在需要改变登录态的页面只要触发上面这个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("退出登录");
}