1、文件路径:src>utils>uuid_token(准备生成uuid并进行本地存储的js文件)
import { v4 as uuidv4 } from 'uuid' (先检车是否有uuid这个包,没有需要npm i uuid)
// 要生成一个随机的字符串,且每次执行不能发生变化,游客身份持久存储
export const getUUID = () => {
// 先从本地存储获取UUID
let uuid_token = localStorage.getItem('UUIDTOKEN')
// 如果没有的话通过uuid生成
if(!uuid_token) {
// 生成游客的临时身份
uuid_token = uuidv4()
// 本地存储一次
localStorage.setItem('UUIDTOKEN',uuid_token)
}
return uuid_token
}
2、文件路径:src>store>detail(在仓库中引入@/utils/uuid_token中的getUUID方法并执行该函数获取uuid到仓库中)
import {getUUID} from "@/utils/uuid_token"
const state = {
// 游客临时身份
uuid_token: getUUID()
}
3、文件路径:src>api>requests.js(在重新封装的axios中配置请求拦截器的相应头为uuid值)
// 请求拦截器:在发请求之前请求拦截器可以检测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
if(store.state.detail.uuid_token) {
// 给请求头添加一个字段(userTempId)--该字段不能随意写,需要与后端沟通好
config.headers.userTempId = store.state.detail.uuid_token
}
return config
})