By的博客

这个就是常规的增删改查。

这个主要是给不同角色分配不同的资源。

角色展示

角色的展示采用了ElementUI中的Collapse 折叠面板，并且采用了手风琴模式，即一次只打开一个角色，如下图：

角色中资源的展示则采用了ElementUI中的树形控件，管理员可以直接直接点击勾选，然后点击修改按钮，进行资源的分配。

在权限管理模块中，这算是前端的核心了。

核心思路

用户在登录成功之后，进入home主页之前，向服务端发送请求，要求获取当前的菜单信息和组件信息，服务端根据当前用户所具备的角色，以及角色所对应的资源，返回一个json字符串，格式如下：

当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下：

由于我对axios进行了封装，因此在每一个需要使用axios的地方，都需要导入相应的请求，略显麻烦，参考https://cn.vuejs.org/v2/guide/plugins.html，我将请求方法挂到Vue上，具体操作如下：

前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。

如果不是前后端分离，一般出了异常都很容易处理，直接跳转到相关的错误页面即可，现在前后端分离，出了异常，就不能再跳转到错误页面了，但是我们可以返回JSON呀！我们可以对服务端可能发生的异常进行统一处理。

密码要加盐处理，这是常识。各个权限处理框架对此都有不同程度的支持，Shiro、SpringSecurity都有自家的解决方案，SpringSecurity中有一个升级版的消息摘要：

BCryptPasswordEncoder

使用BCryptPasswordEncoder，即使相同的明文，生成的新的加密字符串都是不一样的，这样可以避免像在Shiro中那样我们自己配置密码的盐，SpringSecurity中使用BCryptPasswordEncoder的具体流程如下：

这是非常核心的一块内容。

创建Hr和HrService

首先我们需要创建Hr类，即我们的用户类，该类实现了UserDetails接口，该类的属性如下：

服务端采用Spring Boot+Spring Security来开发，完整搭建过程如下：