token的用处

一、token

一般是用户使用用户名和密码登录时，服务端（后台）收到请求，验证用户名和密码，验证成功后服务端会将登录凭证做成数字签名，加密之后生成一个token，然后发给客户端（前端）。

客户端收到token后，可以在cookie或者Local Storage（本地存储）里存储起来。使用axios拦截器，在请求头加上token，客户端每次向服务点发送请求时就会token。

服务器收到请求，验证客户端请求里的token（身份验证），验证成功就向客户端返回请求的数据。（服务器要支持CORS跨域资源共享的策略）

二、Axios设置token请求头

1、配置前置拦截器

在发送axios请求之前将请求拦截，添加头部信息后再发送请求

import axios from 'axios'

// 创建axios实例
const http = axios.create({
    // 通用请求的地址前缀 http://127.0.0.1:3000/api/users/getUser
    baseURL: '/api',
    timeout: 10000,//超时时间
})

//设置请求拦截器
http.interceptors.request.use(function (config) {
    // 获取请求的头部信息
    const headers = config.headers;
    // Authorization是登录时给用户设置token的键值
    if (!headers.Authorization) {
        headers.Authorization = "bearer" + "token";
    }
 
    return config;
}, function (error) {
    console.log("请求拦截器失败")
    return Promise.reject(error);
});

2、请求中加

// get请求
axios.get('/api/data', {
    headers: {
        'Authorization': `bearer ${token}`
    }
});
// post请求
axios.post('/api/data', {
    headers: {
        'Authorization': `bearer ${token}`
    }
});

三、存储token

1、Local Storage

local Storage生命周期是永久的，除非用户手动清除信息，否则将永远存在。相同浏览器的不同页面间可以共享相同的local Storage。

// 存储
localStorage.setItem('token', token);

// 读取
const token = localStorage.getItem('token');

2、SessionStorage

生命周期为当前窗口，数据不会被其他窗口清除，如果一个页面包含多个iframe标签，之间可以共享。

// 存储
sessionStorage.setItem('token', token)；

// 读取
const token = sessionStorage.getItem('token');

3、cookie

// 设置token到cookie
function setTokenToCookie(token) {
  const date = new Date();
  date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 设置cookie过期时间为1天
  const expires = "expires=" + date.toUTCString();
  document.cookie = "token=" + token + ";" + expires + ";path=/";
}
 
// 调用函数，假设已经获取了token
setTokenToCookie('your-token');