完整的路由守卫和登陆拦截

npm install js-cookie --save

• setAxios.js

import axios from 'axios'
import store from "./store";
axios.defaults.baseURL="http://127.0.0.1:3000/"

export default function setAxios() {
    // 请求拦截
    axios.interceptors.request.use(config => {
        if (store.state.token) {
            config.headers['Authorization'] = `Bearer ${store.state.token}`
        } 
        return config
    })
}

• login.vue

import Cookie from "js-cookie";
... ...
Cookie.set("token", res.data.token);
this.$store.commit("changeIsLogin", 1);
this.$router.push({ name: "home" });

• store.js

state: {
    token: '',
    isLogin: 0
},
mutations: {
    changeIsLogin(state, n) {
         state.isLogin = n
    },

    setToken(state, value) {
         state.token = value
    }
},

• router.js

{
    path: "/user",
    component: () => import("@/views/UserInfo.vue"),
    meta: {
        requireAuth: true // 这个页面需要登录权限
    }
},

• mian.js

router.beforeEach((to, from, next) => {
    store.commit('setToken', Cookie.get('token'))
    if (store.state.token) {
        store.commit('changeIsLogin', 1)
    }
    if (to.meta.requireAuth) {
        if (store.state.token) {
            next()
        } else {
            next({ path: '/login' })
        }
    } else {
        next()
    }
})