以游客身份进行页面访问之uuid插件的使用

1.  新建文件夹 src--> utils 下的 uuid-token.js

这里是要进行判断的，如果vuex中没有这个唯一标识，就需要本地存储一个唯一标识。

脚手架已经创建了这个uuid所以我们只需要引入。

import { v4 as uuidv4 } from 'uuid';
// 要生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储
export const getUUID=()=>{
    let uuid_token=localStorage.getItem("UUIDTOKEN")
    if(!uuid_token){
        // 生成临时身份
            uuid_token=uuidv4()
            // 本地存储一次
            localStorage.setItem("UUIDTOKEN",uuid_token)
    }
    return uuid_token;
}

2.去组件所对应的vuex中，引入上面代码中的方法getUUID()

现在这个唯一标识uuid已经被存到了仓库（vuex）中(store-->detail.js).

去二次封装axios的文件的配置请求头响应头位置，axios的二次封装_那只猫喝咖啡的博客-CSDN博客

将uuid通过请求拦截器中请求头的方式带给服务器

由于临时的uuid存在了vuex中，所以要引入store

//引入存有uuid的store
import store from '@/store' 

// 请求拦截器，在发请求之前，请求拦截器可以监测到，可以请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    // config配置对象，对象里面有一个属性很重要，请求头
     // 将uuid通过请求头带给服务器
    if(store.state.detail.uuid_token){
        // 给请求头添加字段，和后台商量好了
        config.headers.userTempId=store.state.detail.uuid_token
    }
    return config
})

这样在每次发送请求时都会通过请求头传递给服务器，在以游客身份获取购物车数据和支付详情时，服务器就可以返回数据，如果没有这个唯一标识，加入购物车的数据，服务器不会返回数据，因为不知道这是谁的购物车，也谈不了拿到谁的购物车数据。

此时以临时游客身份操作的数据将被记录且可使用。