后台管理系统token存储问题

//  点击登录按钮时把后端返回的token令牌存储到本地的一个过程

axios中的token处理request.js

封装axios网络请求

import axios from 'axios' // 1. 
import JSONbig from 'json-bigint'

// 创建一个axios 实例对象  2.
const request = axios.create({
    baseURL: 'http://xxxxx.cn',
    timeout:5000
})

// 添加请求拦截器
request.interceptors.request.use(function(config) {
    // console.log(config)
    const token = JSON.parse(window.sessionStorage.getItem('token'))

    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config;
}, function(error) {
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function(response) {
    return response;
}, function(error) {
    return Promise.reject(error);
});
export default request //3.

在vue路由中使用token进行判断是否登录问题

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home/Home'
import Topic from '../views/Topic/Topic'
import SearchDetails from '../views/searchDetail/searchDetails'
import { Toast } from 'vant'
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
Vue.use(VueRouter)

const routes = [{
        path: '/',
        redirect: "/home"
    }, {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
            activeNum: 0
        },
        children: [{
            path: '/home/searchDetails',
            name: 'searchDetails',
            component: SearchDetails
        }]
    }, {
        path: '/topic',
        name: 'Topic',
        meta: {
            activeNum: 1
        },
        component: () =>
            import ('@/views/Topic/Topic.vue')
    },
    {
        path: '/category',
        name: 'Category',
        meta: {
            activeNum: 2
        },
        component: () =>
            import ('@/views/category/category.vue')
    },
    {
        path: '/cart',
        name: 'Cart',
        meta: {
            activeNum: 3
        },
        component: () =>
            import ('@/views/cart/cart.vue')
    },
    {
        path: '/user',
        name: 'User',
        meta: {
            activeNum: 4
        },
        component: () =>
            import ('@/views/user/user.vue')
    }
]

const router = new VueRouter({
    routes,
    mode: "history"
})

// 路由拦截 前置路由守卫 
router.beforeEach((to, from, next) => {
    console.log(window.sessionStorage.getItem('token'));
    let token = window.sessionStorage.getItem('token')
        // console.log(to);
        // to:要去的路由
        // from: 从哪里出发的路由对象
        // if () {}
    if (to.path == "/cart") { //表示去往购物车页面的
        // 判断有没有登录 判断token 是否存在
        if (token) {
            next() // 有token的话 直接放心跳转到你想去的页面
        } else {
            Vue.prototype.$toast("请先登录") // 提示语句
            setTimeout(() => {
                next('/user') // 否则的话直接跳转到 我的  页面进行登录和注册
            }, 1000)
        }
        return // 这个地方不写return 代码会往下跑 先去 你点击的购物车页面 再才跳转到user页面去 写了return以后就不会出现这种情况了

    }
    next(); // 可以通往要去的路由,如果不写的话 就访问不到对应的路由

})
export default router