React或Vue的token持久化

1.建立一個API檔案夾，下面新增一個token.js檔案，内容如下

//定義key值
const key = 'pc-key'
//存token
const storeToken = (token) => {
  return window.localStorage.setItem(key,token)
}
//取token
const getToken  = () => {
  return window.localStorage.getItem(key)
}
//清空token
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 => {
  //這裡是擷取token值
  const token = getToken()
  if(token) {
    //擷取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頁面使用

1. 拿到token的時候一式兩份，存本地一份
2. 初始化的時候優先從本地取，取不到再初始化為控制

import { makeAutoObservable } from "mobx";
import { http, storeToken, getToken,removeToken } from "../API";

class Login{
  //去拿token，如果沒有，那就指派為空 實作持續化token的關鍵
  token = getToken() || ''
  constructor() {
    makeAutoObservable(this)
  }
  setToken = async ({mobile,code}) => {
    const {data:res} = await http.post('/authorizations',{
      mobile,code
    })

    this.token = res.token
    // 存token
    storeToken(this.token)
  }
  loginOut = () => {
    this.token = ''
    removeToken()
  }
}
export default Login