首页 > 其他分享 >vue3 实现用户登录和权限验证思路梳理

vue3 实现用户登录和权限验证思路梳理

时间:2023-12-20 11:24:11浏览次数:37  
标签:登录 用户 获取 token vue3 权限 梳理 路由

2023-12-20 星期三


一、用登录和退出问题
1登录
思路一:
1.1 login 登录页面,将token 存储本地中。

1.2 前置路由守卫获取 token 并验证,

1.3 前置路由 从缓存中获取用户的访问权限,并生成动态路由。

1.4 aixos 请求拦截器,从存储中获取存储的token,在所有请求前,设置请求头

思路二:
1.1 login 登录页面,发送请求获取token ,将token 存储本地中。
1.2 login 登录页面,发送请求获取用户可访问的路由信息(权限) ,并存缓存中。
1.3 路由前置守卫,从缓存中获取 用户token,验证,通过放行,不通过返回登录页面。
1.4 路由前置守卫,从缓存中获取 用户权限信息,验证访问权限,并生成对应的动态路由。
注意:存在 有token ,没有权限情况,需要重新发起请求,获取用户权限。
可将发请求,通过用户信息获取权限的代码发到前置路由中(),或全局状态管下(pinia中实现)

路由跳转到首页

2. 登出
1.1 清除localStorage中用户信息,
1.2 清除用户权限信息?(不需要,token不存在,需要重新登录)
1.3 返回登录页面

二、用户列表增删改查

 

标签:登录,用户,获取,token,vue3,权限,梳理,路由
From: https://www.cnblogs.com/zh-jone/p/17916107.html

相关文章

  • 《业务安全实战演练》业务安全测试流程梳理
    一、业务安全测试1、业务安全测试流程1.1测试准备准备阶段主要包括对业务系统的前期熟悉工作,以了解被测试业务系统的数量、规模和场景等内容。针对白盒测试,可以结合相关开发文档去熟悉相关系统的业务。针对黑盒测试,可通过实际操作还原业务流程的方式理解业务。1.2......
  • 深度学习知识结构梳理(一)
    一、基础篇1. NMS及其变种NMS:Soft-NMS:IOU-NMS:2. 损失函数Loss及其变种CTCLossL1Loss:BCELoss:IOULoss:FocalLoss:减少易分类样本权重3. 激活函数Sigmoid:RELU:Softmax:Tan:4.BN、LN、IN、GN5. 卷积卷积没有平移不变性6.池化a平均池化:减少过拟合,保持......
  • linux常用指令之用户及权限
    一、创建用户及用户组1、groupadd组名-----------创建用户组2、groupdel组名----------删除用户组3、cat/ect/group----------查看所有用户组4、useradd人名 ------------创建用户(在当前用户组下)5、useradd-g用户组人名 -----------------在某个用户组下创建用......
  • vue3全栈项目:具有登录注册验证的在线实时聊天应用程序。
     项目主要实现的功能:登录注册的身份验证功能(利用JWT)来实现,在与后端验证的时候,会根据不同的身份显示不同的界面;而且根据不同角色赋予不同的权力,如管理员能查看信息,而普通用户只能登录到公共组件——在线实时俩天应用程序。多人在线实时聊天功能——前后端之间根据WebSocket......
  • vue3如何实现断点续传
    首先创建一个vue3项目普通上传//template<inputtype="file"ref="uploadRef"@change="upload"/>//jssetupfunctionupload(event){letfiles=event.target.filesletformData=newFormData()formData.append("file",file......
  • Ubuntu修改文件夹下面所有文件权限的方法
    ubuntu修改文件夹下所有文件的权限命令为:sudochmod-R777filenamefilename为要修改的文件夹名字。-R应该是表示递归修改filename文件夹下所有文件的权限。常用方法如下:sudo chmod 600×××(只有所有者有读和写的权限)sudochmod644×××(所有者有读和写的权限,组用......
  • 在 uniapp 中为 App 添加权限告知目的
     constpermission={ //初始化状态 state:{ //处理应用程序权限请求 WRITE_EXTERNAL_STORAGE:false, ACCESS_FINE_LOCATION:false, CALL_PHONE:false, CAMERA:false, RECORD_AUDIO:false, READ_CONTACTS:false, WRITE_CONTACTS:false, /*#ifd......
  • 脚手架搭建vue3项目
    vue官网:https://cn.vuejs.org/ 下面将搭建一个最基本的vue3项目,包含vue3、ts、pinia、element-plus、scss、api-proxy等配置。步骤如下:1.按脚手架初始化项目进入vue官网的快速上手,按照官网所述,执行:npmcreatevue@latest,然后,按照提示选择 typescript/vue-router/pin......
  • vue3中router配置中的children怎么用
    在Vue3中,当你使用VueRouter创建路由配置时,children属性允许你为某个路由定义嵌套路由。这意味着你可以在父路由下设置子路由,从而构建出具有层级结构的URL路径。这里是一个基本的例子,展示了如何在VueRouter中使用children属性:import{createRouter,createWebHistory}from......
  • linux - 文件与目录权限的设置与修改
    1.文件权限说明[-][rwx][r-x][r--]文件权限分为四部分:1.第一部分表示文件类型,-代表普通文件,d代表目录,l代表链接文件2.第二部分表示文件所有者权限,r代表可读,w代表可写,x代表可执行3.第三部分表示所属用户组权限,r代表可读,x代表可执行4.第四部分表示其他用户权限,r......