1.新建一个API文件夹,下面新增一个token.js文件,内容如下
const key = 'pc-key'
const storeToken = (token) => {
return window.localStorage.setItem(key,token)
}
const getToken = () => {
return window.localStorage.getItem(key)
}
const removeToken = () => {
return window.localStorage.removeItem(key)
}
export {
storeToken, getToken, removeToken
}
2.在https中统一管理
import {http} from './request.js'
import { storeToken, getToken, removeToken } from './token'
export { http, storeToken, getToken, removeToken }
3.封装的API如下
import axios from "axios";
import nprogress from "nprogress";
import 'nprogress/nprogress.css'
import { history } from "./history";
import { getToken } from "./token";
const baseURL = 'http://geek.itheima.net/v1_0';
const http = axios.create({
baseURL,
timeout: 5000
})
http.interceptors.request.use(config => {
const token = getToken()
if(token) {
config.headers.Authorization = `Bearer ${token}`
}
nprogress.start();
return config;
}, err => {
return Promise.reject(err)
})
http.interceptors.response.use(
res => {
nprogress.done();
return res.data
},
error => {
if (error.response.status === 401) {
history.push('/login')
}
return Promise.reject(error.response)
}
)
export { http }
4.在Mobx页面使用
- 拿到token的时候一式两份,存本地一份
- 初始化的时候优先从本地取,取不到再初始化为控制
import { makeAutoObservable } from "mobx";
import { http, storeToken, getToken,removeToken } from "../API";
class Login{
token = getToken() || ''
constructor() {
makeAutoObservable(this)
}
setToken = async ({mobile,code}) => {
const {data:res} = await http.post('/authorizations',{
mobile,code
})
this.token = res.token
storeToken(this.token)
}
loginOut = () => {
this.token = ''
removeToken()
}
}
export default Login