前端网站使用uuid解决游客登录模式

最新推荐文章于 2025-03-23 18:03:16 发布

Vamp_Piece

最新推荐文章于 2025-03-23 18:03:16 发布

阅读量942

点赞数

分类专栏：前端 Vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_50298323/article/details/130840039

版权

本文介绍了在Vue项目中如何利用uuid实现游客登录模式。首先通过安装uuid并验证其安装成功，然后在Vue中全局或局部引入，并创建相关文件进行管理。接着在请求拦截器中使用uuid，并在浏览器本地存储中检查uuid字段。最后，讨论了登录后如何清除uuid以避免信息传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端网站使用uuid解决游客登录模式

一、Vue中安装及使用uuid
二、Vue中引入uuid
三、验证是否成功及清空本地存储中的uuid字段

一、Vue中安装及使用uuid

安装命令：npm install vue-uuid
在项目中package.json文件中查看uuid是否安装成功：若出现如下图所示则表示已安装成功

二、Vue中引入uuid

全局引用：在main.js/main.ts文件中进行引用
局部引用：在你所使用的页面进行引用，这里采用的是局部引用
在src - utils中新建uuid-token.ts文件

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