vue路由守卫（管理状态的登录监视）

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

转载：https://www.jianshu.com/p/6c2048884066