vue项目利用uuid生成唯一随机字符串判定临时游客

我们的项目上线后，除了给用户提供登录注册后，使用该网页功能外，还需要提供临时游客身份，除了进行独立数据的存储，还有给用户拥有临时用该网页一些功能的体验，打游戏的童鞋应该知道，有些游戏会提供临时游客身份供用户体验，我们这样做是一样的道理。 下面网址是uuid使用介绍的npm官网 uuid - npm (npmjs.com)

1、生成临时游客唯一标识

注意：在使用uuid之前需要查看 node_modules 文件夹下有木有uuid 没有：使用npm进行下载: npm install uuid

我们在vue项目中的src文件夹下建一个功能文件夹utils文件夹，下面创建一个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)
    }
    // 没有返回值，就是undefined了
    return uuid_token;
}

• 调用之后，可以在浏览器中查看了

2、在vuex仓库中进行储存并调用

由于进入项目后仓库就初始化了（即进入项目后，唯一标识已经生成了），所以你可以选择一个功能模块的仓库进行调用储存老师游客唯一标识

3、告诉后端唯一标识，返回数据

因为用户是有很多的，在我们没有标识之前，服务器不知道该返回什么数据给我们（即返回空对象|空数组），所以我们需要把唯一标识交给服务器，让它返回对应的数据。 所以在请求之中的请求拦截器中，将uuid生成的唯一标识设置为请求头形式，告诉服务器，该传什么回来【注意：我们需要同后端人员商量请求头的字段设置：定义一个字段，同时也需要后端开启自定义请求头的通配】，在后面的发起的请求中，我们就不需要再把唯一标识当参数发出去了

=============== 到这里就实现uuid生成的唯一标识给临时游客使用了 ====================