大良建网站,服务网络推广,网站注册域名,做网站 视频外链在传统的前后端不分的开发中#xff0c;权限管理主要通过过滤器或者拦截器来进行#xff08;权限管理框架本身也是通过过滤器来实现功能#xff09;#xff0c;如果用户不具备某一个角色或者某一个权限#xff0c;则无法访问某一个页面。
但是在前后端分离中#xff0c;…在传统的前后端不分的开发中权限管理主要通过过滤器或者拦截器来进行权限管理框架本身也是通过过滤器来实现功能如果用户不具备某一个角色或者某一个权限则无法访问某一个页面。
但是在前后端分离中页面的跳转通通交给前端去做后端只提供数据这种时候权限管理不能再按照之前的思路来。
首先要明确一点前端是展示给用户看的所有的菜单显示或者隐藏目的不是为了实现权限管理而是为了给用户一个良好的体验不能依赖前端隐藏控件来实现权限管理即数据安全不能依靠前端就像普通的表单提交一样前端做数据校验是为了提高效率提高用户体验后端才是真正的确保数据完整性。例如前端注册时传来一个邮箱地址前端已经校验通过但是后端还需要再校验因为只有后端的校验才是真正的确保数据是合法的前端只是为了提高用户体验给用户快速的响应一下免得用户把数据传到后端再返回才知道错误。
所以真正的数据安全是在后端实现的后端在设计的过程中就要确保每一个接口都是在满足某种权限的基础上才能访问。也就是说不怕将后端数据接口暴露出来即使暴露出来只要你没有相应的角色也是访问不了的。
前端为了良好的用户体验需要将用户不能访问的接口或者菜单隐藏起来。
有人说如果用户直接在地址栏输入某一个页面的路径怎么办此时如果没有过任何额外的处理的话用户确实可以通过直接输入某一个路径进入到系统的某一个页面中但是不用担心数据泄露问题。因为没有相关的角色就无法访问相关的接口但是如果用户非这样操作进入到一个空白的页面用户体验不好此时我们可以使用Vue中的路由导航守卫来监听页面跳转如果用户想要去一个未获授权的页面则直接在前置路由导航守卫将之拦截下来重定向登录页或者直接就停留在当前页不让用户跳转。 总而言之一句话前端的所有操作都是为了提高用户体验不是为了数据安全真正的效验要在后端来做。 后端中的权限管理每个角色统一一种路径。 在路由表中的index.js文件中添加权限如下 在Home主页读取数据出来显示的时候当前登陆的用户如果不具备路由表index.js中所要求的角色就不显示指定菜单 前言
随着移动互联网的发展前端开发领域也越来越广前端早已经告别了切图的时代迎来了规模化工程化的大前端时代。近几年随着react、angular、vue等前端框架的兴起前后端分离的架构迅速流行。但同时权限控制也带来了问题。
前后端分离之后虽然前端也会进行权限控制、但是都比较简单。而且仅仅前端进行权限控制并不是真正意义的权限控制用户完全可以绕开前端控制直接向后端发起请求。
权限设计
迄今为止最为普及的权限设计模型是RBAC模型基于角色的访问控制Role-Based Access Control) 市面上流行的Apache Shrio、Spring Security都是基于此模型设计的。权限系统可以说是整个系统中最基础同时也可以很复杂的在实际项目中会遇到多个系统多个用户类型多个使用场景这就需要具体问题具体分析但最核心的RBAC模型是不变的我们可以在其基础上进行扩展来满足需求。
下面是简单的用户、角色、操作、机构数据库表设计基本满足了大多数业务场景。 前端控制
用户登录成功会生成一个Token其中会附带一些基本的用户信息不建议附带角色权限信息。用户向后端发送请求都会附带这个Token。
前端一般是菜单和按钮控制在用户登录认证成功之后根据用户ID实时获取菜单信息并渲染。按钮控制的话情况比较复杂如果要求不是很高可以一次性查询出来放入本地缓存进行本地鉴权。
这里撸一个比较简单的实现
hasRole: function(roles){var roleNames this.userInfo.roleNames;if(roleNames!){var role roles.split(,);var array roleNames.split(,);for(var i0;irole.length;i){if(array.indexOf(role[i])-1){return true;}}}return false;
}按钮控制
i-button typeprimary v-ifhasRole(admin) iconios-cloud-download clickexportCashReports导出/i-button后端控制
前端虽然进行了控制但这远远不够特殊用户完全可以避开前端控制直接向后端发起请求这时候如果后端没有对请求进行安全校验很容易会把敏感数据暴露出去。
在单体架构时代如果我使用了安全框架我只需要一个注解亦或者一个拦截配置就可以搞定。
比如这样
Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean (SecurityManager securityManager) {ShiroFilterFactoryBean shiroFilterFactoryBean new ShiroFilterFactoryBean();shiroFilterFactoryBean.setSecurityManager(securityManager);shiroFilterFactoryBean.setLoginUrl(/login.html);shiroFilterFactoryBean.setUnauthorizedUrl(/403);MapString, Filter filtersMap new LinkedHashMap();filtersMap.put(kickout, kickoutSessionControlFilter());shiroFilterFactoryBean.setFilters(filtersMap);MapString, 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(valueadmin)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();ListString roleList Arrays.asList(role);/*** 获取用户实际权限*/ListObject list redisUtils.lGet(perms:userId,0,-1);ListString 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();ListString roleList Arrays.asList(role);/*** 获取用户实际角色*/ListObject list redisUtils.lGet(roles:userId,0,-1);ListString roles roleList.stream().filter(item - list.contains(item)).collect(toList());if (roles.size() 0) {return false;}}}return true;}
}
以上在用户登录成功以后会保存用户的角色信息到缓存生产环境中可以根据业务需求的实时性在读取数据库和读取缓存上自行选择。
小结
前后端开发不是什么银弹微服务也不是不要盲目的选型跟风也不要学习什么大厂经验更不要谈什么技术债适合自己团队的才是最好的。
当然项目不高大上一些出去怎么吹逼怎么扩展团队规模怎么升职加薪所以我前面的都是废话该分还是得分
