Vue实现对游客用户生成唯一的UUID

项目场景：

为游客用户生成一个UUID，以方便购买产品。

---

解决方案：

使用UUID生成唯一的ID：
具体使用步骤如下：
1、首先封装uuid，生成uuid。
新建文件：uuid_token.js

//uuid_token.js
import {v4 as uuidv4 } from 'uuid'
//要生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储

export const getUUID=()=>{
	//先从本地存储中获取uuid（先看一下本地存储中是否存在）
	let uuid_token = localStorage.getItem('UUIDTOKEN');
	//如果没有，则生成一个
	if(!uuid_token){
		//生成游客临时身份
		uuid_token = uuidv4();
		//本地存储存储一次
		localStorage.setItem('UUIDTOKEN', uuid_token)

	}//切记要有返回值
	return uuid_token
}

2、这里我们将UUID储存在detail的小仓库中：

//detail的vuex小仓库
import { getUUID } from '@/utils/uuid_token'
const state = {
	//临时游客的唯一身份
	uuid_token:getUUID()
}
const mutations = {}
const actions = {}
const getters = {}
export default {
	state, 
	mutations,
	actions,
	getters
}

3、在之前封装的request.js中获取生成的uuid：

//对于axios进行二次封装
import axios from "axios";
//引入进度条
import nprogress from "nprogress";
//进入进度条样式
import 'nprogress/nprogress.css'
//在当前模块引入store,获取其中的uuid
import store from '@/store'
//1、利用axios方法创建一个axios实例
const requests = axios.create({
	//配置对象
	baseURL: '/api',
	//代表超时时间：5s
	timeout:5000,

});
//请求拦截器，在请求发出去之前做一些处理
requests.interceptors.request.use((config)=>{
	//获取游客用户的uuid
	if(store.state.detail.uuid_token){
		//如果已经有了uuid，则在headers中添加一个字段，这里需要与后端约定
		config.headers.userTempId = store.state.detail.uuid_token
	}
//config:配置好对象，对象中有一个属性，heards请求头
//进度条开始动
	nprogress.start();
	return config;
})

//相应拦截器i
requests.interceptors.response.use((res)=>{
	//成功的函数
	//进度条结束
	nprogress.done()
	return res.data
},(error)=>{
	return Promise.reject(new Error('faile'));
}
)



//对外暴露axios端口
export default requests