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的其他用法,暂时未涉及,在其他博客上看到,留个链接
uuid的用法