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

红太狼 2023-10-01 13:12 41阅读 0赞

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

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

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

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

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

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

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

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

--------------------

### **前言** ###

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

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

**权限设计**

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

![img][]

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

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

![img][img 1]

**前端控制**

用户登录成功会生成一个`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 {
        
     
        @Autowired
        private 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;
        }
    }

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

**小结**

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190526105743404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190526152034214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019052615231671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2ODg2Mw==,size_16,color_FFFFFF,t_70
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9DTW05QjA1YXlraWJkQzZjSldJOFdTbmNRRXFPZG5SZ0lmODJ5c0EzNTZjT2RKeDJBVEU0Yjg0ckRxRkpwZ2ljbHdyMG9XZkhMSkp3aWM1TndQZTc5SWNBZy82NDA?x-oss-process=image/format,png
[img 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9DTW05QjA1YXlraWJkQzZjSldJOFdTbmNRRXFPZG5SZ0lydnl3aWJSSUFpYmlhSTJjbXF2S2lieXY3cjNkY3RWWFV1WFNkem5pYXJ3QWV2NGtsTFFnM1NCMTdwZy82NDA?x-oss-process=image/format,png