vue使用uuid，请求头headers设置uuid

下载uuid，导入文件

npm install uuid

使用

在src包下创建utils包，存放uuid_token.js文件.在uuid_token文件下进行配置

调用
import {
          
    v4 as uuidv4 } from uuid;

引用
 uuidv4()

import {
          
    v4 as uuidv4 } from uuid;

// 要生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储
export const getUUID = () => {
          
   
    // 先从本地存储获取uuod
    let uuid_token = localStorage.getItem(UUIDTOKEN);
    // 如果没有则生成
    if (!uuid_token) {
          
   
        // 生成游客临时身份
        uuid_token = uuidv4();
        // 本地存储一次
        localStorage.setItem(UUIDTOKEN, uuid_token);
    }
    // 切记要有返回值，没有则是undefined
    return uuid_token;
}

在其他文件中引用uuid

本次我是把生成的uuid放在store中的detail包下，所以后面将uuid放在请求头中会出现调用此包的代码

// 游客身份的模块，生成随机字符串，不能再改变
import {
          
    getUUID } from "@/utils/uuid_token";
//detail模块的仓库
const state = {
          
   
    // 游客的临时身份、
    uuid_token: getUUID()
};

放在请求头中

import store from @/store

// 请求拦截器：在发请求之前，请求拦截器都可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
          
   
    // config:配置对象，对象里面有一个属性很重要，header请求头
    if (store.state.detail.uuid_token) {
          
   
        // 请求头添加一个自带（userTempId）：
        config.headers.userTempId = store.state.detail.uuid_token;
    }
    return config;
})

关于uuid的其他用法，暂时未涉及，在其他博客上看到，留个链接