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

news2024/9/24 21:22:46

权限模型

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

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

用户（User）：系统中的具体操作者，可以是人员、系统账号等。每个用户都有自己的身份识别信息，例如用户名、密码等。

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

菜单（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>

注意：