1. 使用axios做封装 ```json import axios, { Axios } from ‘axios’ import config from ‘@/config’ import StudentApi from ‘./student’ import AdminApi from ‘./admin’

    // 1. 请求的时候,如果有token则添加到请求头中,也可以添加到cooke中,添加到cooke中比较简单,会自动发送,我们直接添加到localStorage const commonRetchReuest = axios.create({ baseURL: config.baseUrl, // withCredentials: true });

    commonRetchReuest.interceptors.request.use(function (config: any) { const token = localStorage.getItem(‘token’); if (token) { config.headers.authorization = token; } return config; })

    const studentFetchApi = StudentApi(commonRetchReuest); const adminFetchApi = AdminApi(commonRetchReuest) // 统一拦截器 commonRetchReuest.interceptors.response.use(function (resp: any) { // 2. 响应的时候,如果有token,保存token到本地(cookie,localstorage) console.log(“resp”, resp.headers.authorization) const { status, data } = resp; console.log(resp.headers) if (resp.headers.authorization) { localStorage.setItem(‘token’, resp.headers.authorization) } if (status === 200) { return data.content; } console.log(‘data===>’, data) }, err => { // 3. 相应的时候,如果消息码是403(没有token,token失效),在本地删除 if (err.response.status === 403) { localStorage.removeItem(‘token’) } return Promise.reject(err) }) export { studentFetchApi, adminFetchApi }

    2. - 在`commonRetchReuest.interceptors.request`拦截器里面,添加本地`token`的判断,如果有`tokeen`则添加`token`到请求头中,如果此处是保存在`cookie`中则会自动添加,需要设置允许请求附带`cookie`就行
    3. ```json
    5. commonRetchReuest.interceptors.request.use(function (config: any) {
    6.     const token = localStorage.getItem('token');
    7.     if (token) {
    8.         config.headers.authorization = token;
    9.     }
    10.     return config;
    11. })

    • 在响应的拦截器中国,如果token有值,则添加到本地locaStroage中

      1. if (resp.headers.authorization) {
      2.       localStorage.setItem('token', resp.headers.authorization)
      3.   }

    • 如果响应的是403(可以与后端商议好状态码,表示token过期或者无效),则在本地的localStorage中移除token

      1. if (err.response.status === 403) {
      2.       localStorage.removeItem('token')
      3.   }