当前位置: 首页 > news >正文

vue中实现路由鉴权和不同用户登录

路由鉴权

路由鉴权是指根据用户权限控制用户可以访问哪些路由。

Vue 中实现路由鉴权

Vue 中可以结合 Vuex 和路由守卫来实现路由鉴权。

1. 使用 Vuex 存储用户权限

  • 创建一个 Vuex store 来存储用户权限。
  • 在登录成功后,将用户权限存储在 Vuex store 中。
  • 在路由守卫中检查用户权限。

2. 使用路由守卫

  • 使用 beforeEach 钩子函数来检查用户权限。
  • 如果用户没有权限访问该路由,则重定向到其他路由。

示例

JavaScript

// Vuex storeconst store = new Vuex.Store({state: {user: {permissions: []}},mutations: {setUserPermissions(state, permissions) {state.user.permissions = permissions;}}
});// 路由守卫router.beforeEach((to, from, next) => {const requiredPermissions = to.meta.permissions;const userPermissions = store.state.user.permissions;if (!requiredPermissions || requiredPermissions.length === 0) {next();return;}if (userPermissions.some(permission => requiredPermissions.includes(permission))) {next();} else {next('/login');}
});

不同用户登录

1. 使用不同的登录页面

  • 为不同的用户类型创建不同的登录页面。
  • 在登录页面收集用户身份信息。
  • 登录成功后,将用户身份信息存储在本地存储或 cookie 中。

2. 使用不同的 API 接口

  • 为不同的用户类型提供不同的 API 接口。
  • 在登录成功后,根据用户身份信息选择要调用的 API 接口。

示例

JavaScript

// 登录页面<template><div><input type="text" v-model="username" /><input type="password" v-model="password" /><button @click="login">登录</button></div>
</template><script>
export default {data() {return {username: '',password: ''};},methods: {login() {const { username, password } = this;if (username === 'admin' && password === 'admin') {// 登录成功,将用户身份信息存储在本地存储中localStorage.setItem('userType', 'admin');this.$router.push('/home');} else {// 登录失败alert('登录失败');}}}
};
</script>// API 接口// 普通用户
const api = {getUser() {// ...}
};// 管理员
const adminApi = {getUser() {// ...},deleteUser() {// ...}
};// 在登录成功后,根据用户身份信息选择要调用的 API 接口const user = JSON.parse(localStorage.getItem('user'));if (user.type === 'admin') {// 使用管理员 API 接口adminApi.getUser();
} else {// 使用普通用户 API 接口api.getUser();
}

总结

  • Vue 中可以结合 Vuex 和路由守卫来实现路由鉴权。
  • 可以使用不同的登录页面和 API 接口来实现不同用户登录。

 

 

相关文章:

vue中实现路由鉴权和不同用户登录

路由鉴权 路由鉴权是指根据用户权限控制用户可以访问哪些路由。 Vue 中实现路由鉴权 Vue 中可以结合 Vuex 和路由守卫来实现路由鉴权。 1. 使用 Vuex 存储用户权限 创建一个 Vuex store 来存储用户权限。在登录成功后&#xff0c;将用户权限存储在 Vuex store 中。在路由守…...

Golang 开发实战day06 - Boolean Conditional

&#x1f3c6;个人专栏 &#x1f93a; leetcode &#x1f9d7; Leetcode Prime &#x1f3c7; Golang20天教程 &#x1f6b4;‍♂️ Java问题收集园地 &#x1f334; 成长感悟 欢迎大家观看&#xff0c;不执着于追求顶峰&#xff0c;只享受探索过程 Golang 教程06 - Boolean &a…...

内容多样化的秘密:Kompas.ai如何拓展你的内容形式

在这个信息爆炸的时代&#xff0c;内容多样化已成为品牌吸引和维系广泛受众的关键策略。多样化的内容形式不仅能够迎合不同用户的偏好&#xff0c;还能够提高内容的覆盖面和参与度&#xff0c;从而增强品牌的市场竞争力。本文将深入探讨内容形式多样化的重要性&#xff0c;展示…...

OneFlow深度学习框架介绍

OneFlow 是由中科院计算技术研究所和华为公司联合开发的开源深度学习框架&#xff0c;旨在为用户提供高效、灵活、易用的深度学习解决方案。以下是 OneFlow 深度学习框架的一些特点和介绍&#xff1a; 高性能&#xff1a;OneFlow 针对大规模模型和数据集进行了优化&#xff0c;…...

基于SSM的宠物管理系统

点击以下链接获取源码: https://download.csdn.net/download/qq_64505944/89076676?spm=1001.2014.3001.5503 技术:SSM(Spring+SpringMVC+MyBatis)+LayUI+Echarts技术栈,分页采用pagehelper插件,EasyExcel进行Excel文件的导入导出。 宠物管理系统 1 CHINER-宠物管理系…...

【第十二篇】使用BurpSuite实现CSRF(实战案例)

CSRF存在前提:简单的身份验证只能保证请求是发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的 业务场景:新增、删除、收藏、编辑、保存使用Burp发现CSRF漏洞的过程如下。 1、如图,存在修改邮箱的功能点如下: 2、修改邮箱的流量包,此时邮箱已被修改: 思路:是…...

css 手写返回箭头

因为在开发App时&#xff0c;为了自定义返回栏&#xff0c;返回箭头&#xff0c;一般都用图片&#xff0c;当图片不方便&#xff0c;最好用css样式实现。 逻辑&#xff1a; 画出一个正方形&#xff0c;让它旋转45度&#xff0c;只显示你需要的两个边即可 代码 <!DOCTYPE ht…...

爬虫逆向非对称加密和对称加密案例

注意&#xff01;&#xff01;&#xff01;&#xff01;某XX网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01; 案例--aHR0cHM6Ly9jcmVkaXQuaGxqLmdvdi5jbi94eWdzL3l6d2ZzeHF5bWQv 第一步&#xff1a;分析页面、请求…...

大数据基础设施搭建 - Spark

文章目录 一、解压压缩包二、修改配置文件conf/spark-env.sh三、测试提交Spark任务四、Spark on Hive配置4.1 创建hive-site.xml&#xff08;spark/conf目录&#xff09;4.2 查看hive的hive-site.xml配置与3.1配置的是否一致4.3 测试SparkSQL4.3.1 启动SparkSQL客户端&#xff…...

轻松上手Jackjson(珍藏版)

写在前面 虽然现在市面上有很多优秀的json解析库&#xff0c;但 Spring默认采用Jackson解析Json。 本文将通过一系列通俗易懂的代码示例&#xff0c;带你逐步掌握 Jackson 的基础用法、进阶技巧以及在实际项目中的应用场景。 一、Jackjson简介 Jackson 是当前用的比较广泛的&a…...

Pytorch数据结构:Tensor(张量)及其维度和数据类型

文章目录 Tensor基础1.1、Tensor的维度&#xff08;Dimensions&#xff09;1.1.1、举例说明1.1.2、高维Tensor 1.2、.dim()和.size()方法1.2.1、.dim()方法1.2.2、.size()方法1.2.3、.shape属性1.2.3、示例代码1.2.3.1、一维Tensor1.2.3.2、二维Tensor1.2.3.3、三维Tensor 1.3、…...

【THM】Protocols and Servers 2(协议和服务器 2

介绍 协议和服务器房间涵盖了许多协议: 远程登录HTTP协议文件传输协议邮件传输协议POP3IMAP实现这些协议的服务器会受到不同类型的攻击。仅举几例,请考虑: 嗅探攻击(网络数据包捕获)中间人 ( MITM ) 攻击密码攻击(身份验证攻击)漏洞从安全的角度来看,我们始终需要思考…...

阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…...

LeetCode hoot100-22

160. 相交链表给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。这道题几分钟就写出来了。应该是几年前做过&#xff0c;这种思想还能一直记得。所以算法题是不会白做的。 我的…...

蓝桥杯 经验技巧篇

1. 注意事项 &#x1f468;‍&#x1f3eb; 官方通知 &#x1f468;‍&#x1f3eb; 资料文档 时间&#xff1a;4月13日 9:00~13:00 &#xff08;时长 4小时&#xff09;物品 准考证&#xff08;赛前一周开放下载&#xff0c;自行打印&#xff09;学生证身份证笔、水、外套&a…...

QMC5883芯片I2C驱动开发指南

这个芯片纯国产挺好用的&#xff0c;电路很好设计&#xff0c;我这垃圾焊功&#xff0c;纯手焊&#xff0c;&#xff0c;居然能用。 第一部分 硬件连接 画的很简陋&#xff0c;看看就可以了。 第二部分 软件驱动 I2C的具体时序实现需要自己搞定&#xff01;&#xff01; 2…...

缓存击穿以及解决方案

1.定义 缓存击穿问题也叫热点Key问题&#xff0c;就是一个被高并发访问并且缓存重建业务较复杂的key突然失效了&#xff0c;无数的请求访问会在瞬间给数据库带来巨大的冲击。 问题描述&#xff1a;假设线程1在查询缓存之后&#xff0c;本来应该去查询数据库&#xff0c;然后把…...

【电路笔记】-逻辑非门

逻辑非门 文章目录 逻辑非门1、概述2、晶体管逻辑非门3、六角施密特反相器逻辑非门是所有逻辑门中最基本的,通常称为反相缓冲器或简称为反相器。 1、概述 反相非门是单输入器件,其输出电平通常为逻辑电平“1”,当其单个输入为逻辑电平“1”时,输出电平变为“低”至逻辑电平…...

vue-element-admin vue3版本搭建

要搭建一个基于Vue 3版本的vue-element-admin项目&#xff0c;你可以按照以下步骤进行&#xff1a; 首先&#xff0c;确保你的开发环境已经安装了Node.js和npm。Node.js是一个JavaScript运行环境&#xff0c;而npm则是Node.js的包管理器&#xff0c;它们将帮助你安装和管理Vue…...

大话设计模式——11.桥接模式(Bridge Pattern)

简介 将抽象部分与它的实现部分分离&#xff0c;使它们可以独立变化。 UML图&#xff1a; 应用场景&#xff1a; 系统需要在构建的抽象化角色和具体化角色之间增加更多的灵活性不想使用继承导致系统类的个数急剧增加某个类存在多个变化维度使用继承方式容易出现类的膨胀 示例…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...