非登录情况下的记住游客状态

一般情况下我们获取关于个人信息的组件时需要一个身份识别，但是在有的情况我们并没有要强行登录，这时候就需要随机生成一个身份识别码，当然，这个前提是要和后台兄弟商量好规定一个请求头

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;
    }