前端保存Token

1. Token是什么？

Token，即令牌，是由服务器产生的一串加密字符串，作为客户端进行请求的“令牌”。当用户第一次登录成功后，服务器生成一个Token并返回给客户端，客户端往后发送请求时只需要携带Token。

2. LocalStorage保存Token

（1）LocalStorage介绍

Web 存储是 HTML5 的重要功能之一，它允许 Web 应用程序在用户浏览器中本地存储数据。

LocalStorage 是浏览器提供的一种 Web 存储形式，它允许 Web 应用程序将数据以字符串的形式存储在用户的浏览器中，并且没有失效时间（永久保存，除非主动删除），即使关闭浏览器或浏览器的页面，存储的数据依旧有效。 需要注意，换个浏览器或者换个设备则无法访问存储在 LocalStorage 的数据。

方法	描述
setItem(key, value)	将数据以字符串形式保存在 LocalStorage 中，其中 key 为键（用于查找 value ），value即是要被保存的数据字符串
getItem(key)	通过 key 访问 LocalStorage 保存的 value
removeItem(key)	通过 key 删除 LocalStorage 的数据，删除对应的键值对

（2）封装LocalStorage保存、删除Token方法

将保存和删除token的方法单独封装在一个JS文件里，方便复用。以下为文件内容：

// storage.js

//这里以 “token” 字符串为键，
const TOKEN_NAME = "token";

// 保存 token 到 localStorage 中，这里的参数token是字符串，可以直接保存
/* 如果token是个对象或者数组,则需要调用 JSON.stringfy(obj) 方法，把对象或数组转化为字符串，再存储到 LocalStorage 中 */
export const setToken = (token) => {
  localStorage.setItem(TOKEN_NAME, token);
};

// 从 localStorage 中获取 token
// 同样，如果需要对象或者数组，则调用JSON.parse(localStorage.getItem(TOKEN_NAME))
export const getToken = () => {
  return localStorage.getItem(TOKEN_NAME);
};
// 删除 token
export const delToken = () => {
  localStorage.removeItem(TOKEN_NAME);
};

3. Axios设置请求拦截器，为请求头添加Token

创建一个 axios 实例，按照需求配置相关参数并暴露出去，方便其他文件导入。

// 对axios进行二次封装，且设置请求、响应拦截器
import { getToken } from "storage";
import axios from "axios";
export const Axios = axios.create({
  baseURL: "https://www.baidu.com",
  timeout: 5000,
});
// 添加请求拦截器
Axios.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers["token"] = getToken();
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

4. 将获取到的Token先保存到 Vuex 中，再保存到 LocalStorage 里

这里是Vuex v4版本。

import { createStore } from "vuex";
import { createApp } from "vue";
import { setToken, getToken } from "@/storage";
// 创建 store 实例
export const store = createStore({
  state() {
    return {
      token: getToken() || '',
    };
  },
  mutations: {
    // 保存 token 到 Vuex 中
    setToken(state, payload) {
       // 保存 token 到 LocalStorage 里
      setToken(payload);
      state.token = payload;
    },
    },
  },
});

const app = createApp({ /* 根组件 */});
// 将 store 实例作为插件安装
app.use(store);