一般情况下我们获取关于个人信息的组件时需要一个身份识别,但是在有的情况我们并没有要强行登录,这时候就需要随机生成一个身份识别码,当然,这个前提是要和后台兄弟商量好规定一个请求头
https://www.npmjs.com/package/uuid
UUID(Universally Unique Identifier),即通用的唯一标识符,其存在是为了让分布式系统中所有的资源都有一个唯一的标识符,
能够彼此区分。多用于文件的上传(或者数据库存储)时避免重复名而引发的不必要问题;
UUID是一组由32位16进制数所组成,理论上UUID的总数是为1632=2128,约等于3.4 x 10123。
也就是说若每纳秒产生1百万个 UUID,要花100亿年才会将所有 UUID 用完;
在如此低概率情况下,可以将UUID视为不重复的序列;
格式:8-4-4-4-12,总共与36位字符(32位英数字符和4位连字符)。如:b9a07a5a-e28c-4459-a22d-babbc0dc050c
引入UUID包后,创建一个uuid的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);
}
//切记有返回值,没有返回值undefined
return uuid_token;
}
准备完毕后找个地方存储uuid
这里我用的是vuex
//封装游客身份模块uuid--->生成一个随机字符串(不能在变了)
import { getUUID } from '@/utils/uuid_token';
const state = {
//游客临时身份
uuid_token: getUUID()
};
当然,最后一步需要到路由守卫去发送时增加请求头
请求拦截器同样可以捞到在vuex仓库里的数据,只需要暴露uuid所在的仓库就行
//在当前模块中引入store
import store from '@/store';
在请求拦截器中加入
//可以让进度条开始动
if (store.state.detail.uuid_token) {
//请求头添加一个字段(userTempId):和后台老师商量好了
config.headers.userTempId = store.state.detail.uuid_token;
}