前后端分离中的权限管理思路

在传统的前后端不分的开发中，权限管理主要通过过滤器或者拦截器来进行（权限管理框架本身也是通过过滤器来实现功能），如果用户不具备某一个角色或者某一个权限，则无法访问某一个页面。

但是在前后端分离中，页面的跳转通通交给前端去做，后端只提供数据，这种时候，权限管理不能再按照之前的思路来。

首先要明确一点，前端是展示给用户看的，所有的菜单显示或者隐藏目的不是为了实现权限管理，而是为了给用户一个良好的体验，不能依赖前端隐藏控件来实现权限管理，即数据安全不能依靠前端，就像普通的表单提交一样，前端做数据校验是为了提高效率，提高用户体验，后端才是真正的确保数据完整性。（例如前端注册时传来一个邮箱地址，前端已经校验通过，但是后端还需要再校验，因为只有后端的校验才是真正的确保数据是合法的，前端只是为了提高用户体验，给用户快速的响应一下，免得用户把数据传到后端再返回才知道错误）。

所以真正的数据安全是在后端实现的，后端在设计的过程中，就要确保每一个接口都是在满足某种权限的基础上才能访问。也就是说，不怕将后端数据接口暴露出来，即使暴露出来，只要你没有相应的角色，也是访问不了的。

前端为了良好的用户体验，需要将用户不能访问的接口或者菜单隐藏起来。

有人说，如果用户直接在地址栏输入某一个页面的路径，怎么办？此时如果没有过任何额外的处理的话，用户确实可以通过直接输入某一个路径进入到系统的某一个页面中，但是，不用担心数据泄露问题。因为没有相关的角色，就无法访问相关的接口，但是如果用户非这样操作，进入到一个空白的页面，用户体验不好，此时我们可以使用Vue中的路由导航守卫，来监听页面跳转，如果用户想要去一个未获授权的页面，则直接在前置路由导航守卫将之拦截下来，重定向登录页，或者直接就停留在当前页，不让用户跳转。

总而言之一句话，前端的所有操作，都是为了提高用户体验，不是为了数据安全，真正的效验要在后端来做。

后端中的权限管理，每个角色统一一种路径。
在这里插入图片描述
在路由表中的index.js文件中添加权限如下：
在这里插入图片描述
在Home主页读取数据出来显示的时候，当前登陆的用户如果不具备路由表index.js中所要求的角色，就不显示指定菜单
在这里插入图片描述

前言

随着移动互联网的发展，前端开发领域也越来越广，前端早已经告别了切图的时代，迎来了规模化，工程化的大前端时代。近几年随着react、angular、vue等前端框架的兴起，前后端分离的架构迅速流行。但同时权限控制也带来了问题。

前后端分离之后，虽然前端也会进行权限控制、但是都比较简单。而且仅仅前端进行权限控制并不是真正意义的权限控制，用户完全可以绕开前端控制直接向后端发起请求。

权限设计

迄今为止最为普及的权限设计模型是RBAC模型，基于角色的访问控制（Role-Based Access Control)

img

市面上流行的Apache Shrio、Spring Security，都是基于此模型设计的。权限系统可以说是整个系统中最基础，同时也可以很复杂的，在实际项目中，会遇到多个系统，多个用户类型，多个使用场景，这就需要具体问题具体分析，但最核心的RBAC模型是不变的，我们可以在其基础上进行扩展来满足需求。

下面是简单的用户、角色、操作、机构数据库表设计，基本满足了大多数业务场景。

img

前端控制

用户登录成功会生成一个Token，其中会附带一些基本的用户信息，不建议附带角色权限信息。用户向后端发送请求都会附带这个Token。

前端一般是菜单和按钮控制，在用户登录认证成功之后，根据用户ID实时获取菜单信息并渲染。按钮控制的话，情况比较复杂，如果要求不是很高可以一次性查询出来，放入本地缓存，进行本地鉴权。

这里撸一个比较简单的实现：

hasRole: function(roles){var roleNames = this.userInfo.roleNames;if(roleNames!=""){var role = roles.split(",");var array  = roleNames.split(",");for(var i=0;i<role.length;i++){if(array.indexOf(role[i])>-1){return true;}}}return false;
}

按钮控制：

<i-button type="primary" v-if="hasRole('admin')" icon="ios-cloud-download"  @click="exportCashReports">导出</i-button>

后端控制

前端虽然进行了控制，但这远远不够，特殊用户完全可以避开前端控制直接向后端发起请求，这时候如果后端没有对请求进行安全校验，很容易会把敏感数据暴露出去。

在单体架构时代，如果我使用了安全框架，我只需要一个注解，亦或者一个拦截配置就可以搞定。

比如这样：

@Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean (SecurityManager securityManager) {ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();shiroFilterFactoryBean.setSecurityManager(securityManager);shiroFilterFactoryBean.setLoginUrl("/login.html");shiroFilterFactoryBean.setUnauthorizedUrl("/403");Map<String, Filter> filtersMap = new LinkedHashMap<>();filtersMap.put("kickout", kickoutSessionControlFilter());shiroFilterFactoryBean.setFilters(filtersMap);Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();/*** 静态文件*/filterChainDefinitionMap.put("/css/**","anon");filterChainDefinitionMap.put("/images/**","anon");filterChainDefinitionMap.put("/js/**","anon");filterChainDefinitionMap.put("/file/**","anon");/*** 登录*/filterChainDefinitionMap.put("/login.html","anon");filterChainDefinitionMap.put("/sys/logout","anon");filterChainDefinitionMap.put("/sys/login","anon");/*** 管理后台*/filterChainDefinitionMap.put("/sys/**", "roles[admin]");filterChainDefinitionMap.put("/**", "kickout,authc");shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);return shiroFilterFactoryBean;
}

或者这样：

 /*** 角色列表*/@PostMapping("/list")@RequiresRoles(value="admin")public Result list(SysRole role){return sysRoleService.list(role);}

前后端分离之后，后端并不会保存任何用户信息，只能通过前端传输的token进行校验，这里参考Shrio的实现思路，自己撸一个注解来实现权限校验。

 
/*** 权限注解*/
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
public @interface RequiresRoles {/*** A single String role name or multiple comma-delimitted role names required in order for the method* invocation to be allowed.*/String[] value();/*** The logical operation for the permission check in case multiple roles are specified. AND is the default* @since 1.1.0*/Logical logical() default Logical.OR;
}

然后写个拦截器对请求进行拦截，这里截取部分认证代码：

/*** @Description* @Date 2020/6/12*/
@Component
public class AuthUtils {@Autowiredprivate RedisUtils redisUtils;public boolean check(Object handler,String userId){HandlerMethod handlerMethod = (HandlerMethod) handler;Annotation permAnnotation= handlerMethod.getMethod().getAnnotation(RequiresPermissions.class);if(permAnnotation!=null) {String[] role = handlerMethod.getMethod().getAnnotation(RequiresPermissions.class).value();List<String> roleList = Arrays.asList(role);/*** 获取用户实际权限*/List<Object> list = redisUtils.lGet("perms:"+userId,0,-1);List<String> permissions = roleList.stream().filter(item -> list.contains(item)).collect(toList());if (permissions.size() == 0) {return false;}}else{Annotation roleAnnotation= handlerMethod.getMethod().getAnnotation(RequiresRoles.class);if(roleAnnotation!=null){String[] role = handlerMethod.getMethod().getAnnotation(RequiresRoles.class).value();List<String> roleList = Arrays.asList(role);/*** 获取用户实际角色*/List<Object> list = redisUtils.lGet("roles:"+userId,0,-1);List<String> roles = roleList.stream().filter(item -> list.contains(item)).collect(toList());if (roles.size() == 0) {return false;}}}return true;}
}

以上，在用户登录成功以后会保存用户的角色信息到缓存，生产环境中可以根据业务需求的实时性，在读取数据库和读取缓存上自行选择。

小结

前后端开发不是什么银弹，微服务也不是，不要盲目的选型跟风，也不要学习什么大厂经验，更不要谈什么技术债，适合自己团队的才是最好的。

当然，项目不高大上一些，出去怎么吹逼，怎么扩展团队规模，怎么升职加薪，所以我前面的都是废话，该分还是得分！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

陈顺志 php,芦芽山之情

陈顺志 php,芦芽山之情

芦芽山之情循着潺潺的水声&#xff0c;穿过颗颗红桦树&#xff0c;踩着红色的木板桥&#xff0c;听着山谷中传来的一声声清脆的鸟鸣&#xff0c;闻着扑鼻的在空气中酝酿着的雨露的清新&#xff0c;我们向芦芽山上走去。青山　白雾我们仿佛踏入了梦境的天地&#xff0c;山在雾中…
阅读更多...
前、后端分离权限控制设计与实现

前、后端分离权限控制设计与实现

简述 近几年随着react、angular、vue等前端框架兴起&#xff0c;前后端分离的架构迅速流行。但同时权限控制也带来了问题。 网上很多前、后端分离权限仅仅都仅仅在描述前端权限控制、且是较简单、固定的角色场景&#xff0c;满足不了我们用户、角色都是动态的场景。且仅仅前端…
阅读更多...
风云php,t.php · 风云酷小子/js - Gitee.com

风云php,t.php · 风云酷小子/js - Gitee.com

$ch curl_init();curl_setopt($ch, CURLOPT_URL, "http://zx.rcpx.cc/els/html/courseStudyItem/courseStudyItem.updateTimestepByUserTimmer.do");curl_setopt($ch, CURLOPT_HEADER, 1);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);// post数据curl_setopt($ch,…
阅读更多...
前后端分离必备的接口规范，十分接地气

前后端分离必备的接口规范，十分接地气

1. 前言 随着互联网的高速发展&#xff0c;前端页面的展示、交互体验越来越灵活、炫丽&#xff0c;响应体验也要求越来越高&#xff0c;后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻&#xff0c;从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然…
阅读更多...
ubuntu php设置,关于ubuntu php环境设置详解-PHP问题

ubuntu php设置,关于ubuntu php环境设置详解-PHP问题

ubuntu php设置办法&#xff1a;起首更新源列表&#xff1b;而后关上“终端窗口”&#xff0c;输出饬令“sudo apt-get install php5”来装置php&#xff1b;接着装置设置装备摆设好apache环境&#xff0c;并装置php5-gd模块&#xff1b;最初创立“info.php”文件便可。Ubuntu …
阅读更多...
springboot前后端分离后权限原理浅谈

springboot前后端分离后权限原理浅谈

1. 需求描述 最近在梳理springboot前后端分离后的权限管理问题。前段时间&#xff0c;已经把shiro的实现和spring security 的实现进行了初步的了解。如果深入细节&#xff0c;一个篇幅怕是不够。本文仅对权限管理的一些通用原理进行探讨。 2. 权限分类 在前后端分离之后&am…
阅读更多...
js异步请求php数据,原生JS发送异步数据请求实例详解

js异步请求php数据,原生JS发送异步数据请求实例详解

这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下在做项目的时候&#xff0c;有时候需要用到异步数据请求&#xff0c;但是如果这个时候没有框架的依赖&#xff0c;就需要用到原生JS进行…
阅读更多...
MyBatis-Plus——增删查改

MyBatis-Plus——增删查改

开发环境 IDEA JDK&#xff1a;1.8 Spring Boot:2.6.2 Maven:3.3.9 MySQL:8.0.23 数据库准备 CREATE DATABASE mybatis_plus_db;DROP TABLE IF EXISTS person; CREATE TABLE person(id BIGINT(20) NOT NULL COMMENT 主键ID, name VARCHAR(30) NULL DEFAULT NULL COMMENT 姓…
阅读更多...
让程序员最爽的ThreadLocal使用姿势

让程序员最爽的ThreadLocal使用姿势

一、常见场景 ​ 1、ThreadLocal作为线程上下文副本&#xff0c;那么一种最常见的使用方式就是用来方法隐式传参&#xff0c;通过提供的set()和get()两个public方法来实现在不同的方法中的参数传递。对于编程规范来说&#xff0c;方法定义的时候是对参数个数是有限制的&#x…
阅读更多...
php 堆和栈示例,php中堆和栈的使用

php 堆和栈示例,php中堆和栈的使用

这篇文章介绍的内容是关于php中堆和栈的使用&#xff0c;有着一定的参考价值&#xff0c;现在分享给大家&#xff0c;有需要的朋友可以参考一下一、关于堆和栈的概念及区别这里参考上篇博客&#xff1a; 浅谈堆和栈的区别通过这篇文章&#xff0c;我们可以知道广义的堆和栈到底…
阅读更多...
一场事故告诉你zookeeper和nacos谁更适合做注册中心

一场事故告诉你zookeeper和nacos谁更适合做注册中心

前言 ​ 在分布式系统中&#xff0c;注册中心充当着重要角色&#xff0c;是服务发现、客户端负载均衡中不可缺少的一员。注册中心除了能够实现基本的功能外&#xff0c;他的稳定性、可用性和健壮性对整个分布式系统的流畅运行影响重大。dubbo作为国内一款主流的分布式系统&…
阅读更多...
mysql 排他,mysql 共享锁 排他锁 防插入锁

mysql 排他,mysql 共享锁 排他锁 防插入锁

试验1事务1&#xff1a;#!/usr/bin/pythonimport timeimport MySQLdb;conn MySQLdb.connect(host"localhost",port3306,user"root",passwd"asdf",db"test",unix_socket"/data/mysql_3306/mysql.sock")cursor conn.cursor(…
阅读更多...
MySQL操作之JSON数据类型操作详解

MySQL操作之JSON数据类型操作详解

MySQL操作之JSON数据类型操作详解 这篇文章主要介绍了MySQL操作之JSON数据类型操作详解&#xff0c;内容较为详细&#xff0c;具有收藏价值&#xff0c;需要的朋友可以参考。 概述 mysql自5.7.8版本开始&#xff0c;就支持了json结构的数据存储和查询&#xff0c;这表明了my…
阅读更多...
Mysql执行计划含义,mysql执行计划介绍

Mysql执行计划含义,mysql执行计划介绍

烂sql不仅直接影响sql的响应时间&#xff0c;更影响db的性能&#xff0c;导致其它正常的sql响应时间变长。如何写好sql&#xff0c;学会看执行计划至关重要。下面我简单讲讲mysql的执行计划&#xff0c;只列出了一些常见的情况&#xff0c;希望对大家有所帮助。测试表结构&…
阅读更多...
Http GET 请求参数中文乱码

Http GET 请求参数中文乱码

Http GET 请求参数中文乱码 两种解决方式 第1种&#xff1a;代码里转换 String name request.getParamter("name"); String nameUtf8 new String(name.getBytes("ISO8859-1"), "UTF-8");第2种&#xff1a;修改Tomcat配置 TOMCAT_HOME/conf…
阅读更多...
matlab randomsample,randperm和randsample函数用法对比

matlab randomsample,randperm和randsample函数用法对比

构建替代数据的时候&#xff0c;一种常见的思路是打乱原数据的排列次序&#xff0c;通过随机置换原数据的排列次序从而产生和原数据系列统计特征(如均值、方差、分布)一致的随机数据。具体到Matlab中&#xff0c;此思路的实现会涉及到两个命令&#xff1a;randperm和randsample…
阅读更多...
SpringBoot的编码问题

SpringBoot的编码问题

第一种方式&#xff1a;直接在配置文件中设置浏览器的解析编码的格式 #设置字符编码 #开启springboot的http字符编码的支持 spring.http.encoding.enabledtrue #强制使用指定字符编码 spring.http.encoding.forcetrue #指定使用的字符编码 spring.http.encoding.charsetUTF-8第…
阅读更多...
寄生虫php版,-PHP版SEO最新教材版排名DeDeCms寄生虫V90繁殖

寄生虫php版,-PHP版SEO最新教材版排名DeDeCms寄生虫V90繁殖

今天视频教程演示说明下PHP寄生虫服务端的使用。主要在很多搭建的过程中会出错&#xff0c;今天主要就讲解下寄生虫配置常见的问题。那么同样也可以看下我们之前的通用版寄生虫使用教程[通用版教程在文件夹中有]&#xff0c;本教程是针对PHP版本的寄生虫服务端进行配置演示。继…
阅读更多...
SpringMVC请求参数乱码问题

SpringMVC请求参数乱码问题

post 请求方式&#xff1a; 在 web.xml 中配置一个过滤器 <!-- 配置 springMVC 编码过滤器 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter…
阅读更多...
MySQL中 JSON 数据类型应用

MySQL中 JSON 数据类型应用

前言 今天接触到mysql中json数据类型&#xff0c;之前不知道有这个类型&#xff0c;今天学习一下。 JSON我相信大家都已经很熟悉了&#xff0c;但在 MySQL中&#xff0c;直至 5.7 版本中&#xff0c;才正式引入 JSON数据类型。在次之前&#xff0c;我们通常使varchar或text数…
阅读更多...
最新文章

Copyright @ 2022~2023