将 Token 存储在请求头中发送接口请求_前端把token加到请求头

一、需求

用户登录后将 token 存储在下次接口访问的请求头中进行接口请求

二、分析

import router from './router';
import { Message } from 'element-ui';
import Axios from 'axios'

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
      next();
    } else {
      let token = localStorage.getItem('Token');
      if (token === null || token === '') {
        Message.warning('请登录')
        next('/login');
      } else {
          next();
      }
    }
  });
// 添加请求拦截器，在请求头中加token
Axios.interceptors.request.use(
    config => {
      if (localStorage.getItem('TOKEN')) {
        config.headers.TOKEN = localStorage.getItem('TOKEN');
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28