前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

news2024/11/14 6:16:30

权限模型

 Ruoyi框架学习——权限管理_若依框架权限-CSDN博客

 

用户-角色-菜单(User-Role-Menu)模型是一种常用于权限管理的设计模式,用于实现系统中的用户权限控制。该模型主要包含以下几个要素:

  1. 用户(User):系统中的具体操作者,可以是人员、系统账号等。每个用户都有自己的身份识别信息,例如用户名、密码等。

  2. 角色(Role):是对用户的一种分类或分组,每个角色可以包含一组权限或权限集合。通常,用户可以被分配到一个或多个角色,而不是直接分配权限给用户。角色可以是预定义的,也可以是根据业务需求动态创建的。

  3. 菜单(Menu):系统中的功能或操作项,例如菜单、页面、按钮等。菜单通常与权限相关联,只有具有相应权限的用户或角色才能访问或执行对应的菜单项。

 登录鉴权方式

前端登录鉴权方式是指在前端页面中对用户进行身份验证和权限验证的过程。以下是一些常见的前端登录鉴权方式:

1. 用户名密码登录

这是最基本的登录方式,用户在登录页面输入用户名和密码,前端将这些信息发送到后端进行验证。后端通过验证后返回一个包含用户信息的令牌(Token),前端将这个令牌保存起来(如存储在Cookie、LocalStorage或SessionStorage中)以后的请求都需要带上这个令牌进行验证

2. 扫码登录

扫码登录通常用于移动应用或桌面应用与网页之间的登录。用户在前端页面使用手机扫描二维码,后端生成一个唯一的登录凭证(Ticket),前端轮询后端接口检查该凭证是否已被使用。一旦凭证被使用,后端通过验证后返回一个包含用户信息的令牌,前端保存起来进行后续请求的验证。

3. 第三方登录

第三方登录允许用户使用第三方平台(如微信、QQ、微博等)的账号进行登录。前端将用户的登录凭证(如OpenID)发送到后端进行验证。后端通过验证后返回一个包含用户信息的令牌,前端保存起来进行后续请求的验证。这种方式简化了用户的登录流程,提高了用户体验。

4. HTTP Basic Authentication

HTTP Basic Authentication 是一种简单的鉴权方式,客户端在请求时通过用户名+密码的方式实现对用户身份的验证。然而,这种方式存在安全性问题,因为用户名和密码以Base64编码方式加密,并不安全。此外,HTTP协议没有提供机制清除浏览器中的Basic认证信息,除非关闭标签页、浏览器或清除历史记录。

5. Session-Cookie鉴权

Session-Cookie鉴权是利用服务端的Session(会话)和浏览器(客户端)的Cookie来实现前后端通信认证模式。客户端发送登录信息到服务器,服务器校验成功后生成Session ID并保存在服务端,同时通过Set-Cookie响应头将Session ID发送给客户端。客户端在后续请求中携带Session ID(通常放在Cookie中),服务器通过验证Session ID来确认用户身份。这种方式依赖于Cookie,存在被篡改和CSRF攻击的风险

6. Token鉴权

Token鉴权是一种无状态的鉴权方式,服务端不保存用户的认证信息或会话信息。用户登录成功后,服务端生成一个加密的Token令牌并返回给客户端。客户端在后续请求中携带Token令牌,服务端通过验证Token令牌的有效性来确认用户身份。Token令牌通常包含用户唯一身份标识、时间戳和签名等信息,以保证安全性和时效性。常见的Token鉴权方式有JWT(JSON Web Token)等。

7. JWT(JSON Web Token)鉴权

JWT是一种基于JSON的开放标准(RFC 7519),用于在网络应用环境间安全地传输信息。JWT由头部(Header)、负载(Payload)和签名(Signature)三部分组成,通过这三部分可以验证信息的真实性和完整性。JWT通常用于在用户登录后生成一个包含用户信息的Token令牌,并在后续请求中携带该Token令牌进行身份验证。

8. OAuth(开放授权)

OAuth是一种开放授权标准,允许用户在不提供用户名和密码的情况下,授权第三方应用访问他们在特定服务上存储的敏感信息。OAuth通过令牌(Token)来代替密码进行身份验证和授权,从而提高了安全性。OAuth通常用于第三方登录和API访问等场景

不同用户登录显示不同菜单栏(登录鉴权) 

1.常见思路

在前端实现基于角色+自定义权限或角色+数据字典的用户角色权限判断,并据此返回不同的导航菜单,通常涉及以下几个步骤:

1. 后端准备

a. 角色与权限定义

  • 在后端数据库中定义角色(Roles)和权限(Permissions)。每个角色可以关联多个权限。
  • 权限可以是具体的操作(如“编辑文章”、“删除用户”等),也可以是访问特定页面的权限。

b. 数据字典

  • 如果使用数据字典来控制某些动态内容(如导航菜单项),则需要在后端定义这些数据字典,并关联到相应的权限或角色。

c. 用户角色与权限分配

  • 为每个用户分配一个或多个角色,这些角色决定了用户的权限。

d. API 接口

  • 提供一个或多个API接口,用于前端查询当前登录用户的角色、权限以及可能的数据字典信息。
2. 前端实现

a. 登录与获取权限

  • 用户登录后,前端通过API调用获取当前用户的角色、权限及可能的数据字典信息。
  • 将这些信息存储在前端的全局状态管理(如Redux、Vuex等)中,以便在多个组件中共享。

b. 导航菜单生成

  • 根据获取到的权限或数据字典信息,动态生成导航菜单。
  • 这通常涉及到遍历权限列表或数据字典,检查每个菜单项是否对当前用户可见。

c. 示例代码

假设你使用Vue.js和Vuex来实现:

// Vuex store  
const store = new Vuex.Store({  
  state: {  
    userPermissions: [], // 存储用户权限  
    navigationItems: [] // 存储导航菜单项  
  },  
  mutations: {  
    setUserPermissions(state, permissions) {  
      state.userPermissions = permissions;  
      // 根据权限生成导航菜单(这里仅为示例,实际逻辑可能更复杂)  
      state.navigationItems = permissions.map(permission => {  
        // 假设每个权限对象中包含一个字段用于指示对应的菜单项  
        return {  
          title: permission.menuTitle,  
          path: permission.menuPath,  
          visible: true // 根据实际逻辑判断是否需要显示  
        };  
      }).filter(item => item.visible);  
    }  
  },  
  actions: {  
    fetchUserPermissions({ commit }) {  
      // 调用API获取用户权限  
      axios.get('/api/user/permissions').then(response => {  
        commit('setUserPermissions', response.data);  
      });  
    }  
  }  
});  
  
// Vue组件中使用  
<template>  
  <nav>  
    <ul>  
      <li v-for="item in navigationItems" :key="item.path">  
        <router-link :to="item.path">{{ item.title }}</router-link>  
      </li>  
    </ul>  
  </nav>  
</template>  
  
<script>  
export default {  
  computed: {  
    navigationItems() {  
      return this.$store.state.navigationItems;  
    }  
  },  
  mounted() {  
    this.$store.dispatch('fetchUserPermissions');  
  }  
}  
</script>

注意

  • 上面的代码仅为示例,实际项目中可能需要更复杂的逻辑来处理权限和导航菜单的生成。
  • 权限和菜单项的对应关系可能不是直接存储在权限对象中的,而是需要通过额外的逻辑或数据字典来映射。
  • 安全性考虑:确保前端不会直接暴露敏感信息,所有敏感操作都应在后端进行验证。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2105094.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于微信的热门景点推荐小程序的设计与实现(论文+源码)_kaic

摘 要 近些年来互联网迅速发展人们生活水平也稳步提升&#xff0c;人们也越来越热衷于旅游来提高生活品质。互联网的应用与发展也使得人们获取旅游信息的方法也更加丰富&#xff0c;以前的景点推荐系统现在已经不足以满足用户的要求了&#xff0c;也不能满足不同用户自身的个…

Leetcode—72. 编辑距离【中等】

2024每日刷题&#xff08;158&#xff09; Leetcode—72. 编辑距离 动态规划算法思想 实现代码 class Solution { public:int minDistance(string word1, string word2) {const int m word1.length();const int n word2.length();vector<vector<int>> dp(n 1,…

Multi-Mode DOA Estimation AND Relax Super Resolution DOA

之前看到加特兰的新品发布会上&#xff0c;PPT写的一些算法信号处理流程图&#xff0c;这里记录学习一下自己的思考&#xff1a; 原始数据采样数据预处理距离维FFT通道间DDMA数据分离非相干累计RV-MAP coarse-cfar fine CFAR(multi-Mode DOA Estimation): 舱内的CPD信号处理流…

分支线定向耦合器宽带化设计和ADS仿真

分支线定向耦合器宽带化设计和ADS仿真 工程下载链接&#xff1a;分支线定向耦合器宽带化设计和ADS仿真-ADS工程文件 之前经常分析分支线定向耦合器&#xff0c;例如在15、ADS使用记录之耦合器设计和基于AWR的微带线分支线耦合器设计-从原理到版图中都有涉及&#xff0c;但是由…

Axure中继器动态数据图表制作

在Axure RP中&#xff0c;中继器&#xff08;Repeater&#xff09;是一个非常强大的工具&#xff0c;它允许设计者动态地展示和交互数据&#xff0c;进而创建各种复杂的数据可视化图表&#xff0c;如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设…

solidworks模型导出urdf(超详细)

目录 写在前面的话1 solidworks 文件2 安装sw2urdf插件3 完整步骤3.1 设置基准轴3.2 设置点3.3 设置坐标轴3.4 设置sw2urdf参数3.5 导出可能的问题3.6 ros2 编译3.7 成功结果画面 写在前面的话 刚进组1个月&#xff0c;我的博士研究方向是自动驾驶&#xff0c;还没入门&#x…

火山引擎携手Keep,让线上健身更快更稳

今年年初&#xff0c;一部《热辣滚烫》又掀起了健身塑型风潮。作为健身领域的佼佼者&#xff0c;Keep 为用户提供全面的健身方案&#xff0c;以帮助用户实现健身目标。随着短视频运动的流行&#xff0c;Keep 覆盖的运动品类超过60类&#xff0c;同时不断尝试直播等新的内容承载…

Oceanbase 透明加密TDE

官方文档&#xff1a;数据库透明加密概述-V4.3.2-OceanBase 数据库文档-分布式数据库使用文档 OceanBase 数据库社区版暂不支持数据透明加密。 数据存储加密是指对数据和 Clog 等保存在磁盘中的数据进行无感知的加密&#xff0c;即透明加密&#xff08;简称 TDE&#xff09;。…

【时时三省】(C语言基础)指针进阶 例题

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 字符数组例题&#xff1a; arr后面放了六个字符 所以这个数组的元素个数就是6 第一个arr 因为他计算的是一整个数组的大小 就是打印6 第二个arr0 arr没有单独放在它的内部 所以它计算的就是…

flunet瞬态处理时均问题

fluent处理时均问题 最近遇到个同学&#xff0c;处理心脏跳动的时均问题&#xff0c;由于仅想取部分稳定时间段的时均数据&#xff0c;fluent的自动采样仅能对全部时间做处理&#xff0c;就存在问题了&#xff0c;网上看到两篇很详细的文章&#xff0c;记录下。 具体网址&…

Docker Elasticsearch安装ik分词插件教程

本章教程在通过Docker 安装Elasticsearch,并安装ik分词插件。本文的重点是安装ik分词插件。 一、安装Elasticsearch 安装教程以前写过,参考:https://blog.csdn.net/qq_19309473/article/details/140725121 安装之后,通过http://ip:9200,可以访问,就表示安装成功。 二、安装…

[python]socket之网络编程基础知识

1.三要素介绍: ip地址:设备在网络内的标识,分为ipv4和ipv6 端口号:软件(程序)在设备上的唯一标识.0-65535,其中0-1024为知名端口号,程序开发中最好不要使用 协议:数据发送的规则,有TCP和UDP 等 ip地址详解: 简单来说主要分为 IpV4, IpV6 IpV4: 采用4个字节, 十进制的形式来…

DSP基本名词术语及其关系

前言 信号处理是现代科技和工程领域中一个重要的分支&#xff0c;涉及对各种信号进行采集、传输、处理和分析的一系列方法和技术。其核心概念包括信号、系统、线性系统、时域与频域、稳定性和稳定性等。信号处理技术主要用于对模数转换后和数模转换前的数字信号进行处理&#x…

递归算法专题——真正理解递归和正确使用递归力扣实战应用

目录 1、使用递归 1.1 如何理解递归 1.2 如何写好一个递归算法 2、 算法应用【leetcode】 2.1 题一&#xff1a;汉诺塔问题【面试题】 2.1.1 算法原理 2.1.2 算法代码 2.2 题二&#xff1a;合并两个有序链表 2.2.1 算法原理 2.2.2 算法代码 2.3 题三&#xff1a;反转…

XC企业建站系统V1.2.5

多模板主题的企业官网建站系统。提供全部无加密源码&#xff0c;支持私有化部署。 V1.2.5添加小功能 站点配置&#xff0c;增加【留言板显示开关】 站点主题 - 扩展配置&#xff0c;增加对首页【产品中心】【新闻资讯】板块的显示开关和标题自定义功能&#xff08;注&#xff…

day-49 使数组中所有元素相等的最小操作数

思路 第一个数和最后一个数要变为一致&#xff0c;需要操作n-1次&#xff0c;然后第二个数和倒数第二个数要操作n-3次 解题过程 以此类推即可得出答案 Code class Solution {public int minOperations(int n) {int ans0;int t(n-1);while(t>0){anst;t-2;}return ans;} }作…

一、selenium自动化简介selenium工具集

文章目录 一、简介二、组成部分三、selenium工具集3.1 Selenium IDE3.2 Selenium WebDriver3.3 Selenium Grid3.4 Appium 一、简介 官方网站 Selenium 是支持 web 浏览器自动化的一系列工具和库的综合项目。 它提供了扩展来模拟用户与浏览器的交互&#xff0c;用于扩展浏览器分…

企业分享 - 益丰大药房监控升级之路

益丰大药房是全国大型药品零售连锁企业&#xff08;中国沪市主板上市连锁药房&#xff09;&#xff0c;专注医药零售行业23载&#xff0c; 市值稳居国内上市连锁药店前列/中国上市公司500强。 益丰有体量庞大的研发运维团队&#xff0c;有体量庞大的 IT 设施和服务&#xff0c;…

iic学习

iic 时钟scl为高的时候 sda数据为低的时候是起始位 当scl信号为高电平的时候 sda数据为高的时候是 停止位 &#xff08;时钟稳定 数据变化 才会发生起始位和停止位&#xff09; 当sclk为高电平时 sda 数据需要保持或者需要保持稳定 &#xff08;理解就是不要有上升沿和下降沿的…

WebTopo 组态软件+ARM 工业计算机:重塑污水处理

污水处理领域也在不断寻求更高效、更稳定的解决方案。WebTopo 组态软件与 ARM 工业计算机的结合&#xff0c;尤其是 ARMxy 工业树莓派在污水处理中的应用&#xff0c;为这个领域带来了全新的变革。 WebTopo 组态软件以其清晰的布局和强大的功能&#xff0c;成为了污水处理系统中…