权限

项目描述: 后台管理系统是公司内部管理系统, 考虑到使用的用户体不同 , 有人事经理, 管理员. 人事专员, 薪资专员, 普通员工等角色 , 所以我采用Rbac权限管理模式 , 将权限赋值于角色 , 角色再赋值于对应用户, 这样不同用户就拥有了不同的用户信息 , 具体操作我是在用户登录时,在路由守卫中利用vue-x 配合后端 获取当前用户登录信息, 获取相对应角色权限, 再调用router.addRouter( ) , 生成动态路由, 这样用户就只能看到, 角色相匹配的网页信息 , 左边菜单栏利用用户菜单权限信息, 与路由中name值, 生成动态菜单栏 , 相关修改, 删除. 按钮也会根据用户的操作权限进行禁用 . 员工页面就是对员工的增删改查，通过对员工进行查看，调岗, 删除等功能模块，利用ele插槽, 获取当前用户的id , 对角色信息的调配, 这些角色里都有着相对应的权限信息, 通过角色的分配, 员工也拥有了对应权限公司设置模块是 角色权限的赋值, 这里可以对人事专员, 人事经理 , 薪资专员 点击添加 , 调用ele弹窗组件 , 通过传递当前角色的id , 进行分配页面权限 以及主页的新增按钮 和修改按钮的权限 组织架构，公司部门的增删查改 利用element-ui的树形组件布局 因为返回来的数据是扁平化的，利用递归形成树状的数据结构 进行渲染权限设置: 在路由守卫进行第一次判定, 看是否有token , 如果有token 进行第二层判定 , 看是否是登录页, 如果是就跳转到首页. 如果有token并不是登录页, 就调用vue-x 获取用户权限, 生成动态路由放行如果没有token , 我会先设置一个白名单. 白名单里有404/以及登录页 , 进行判定, 如果在白名单里就放行. 如果不在就跳转到登录页安全设置: 在安全设置里我会进行主动验证token , 以及被动验证token的情况 , 在请求拦截器里主动验证token , 我会先定义一个逻辑, 在登录时就储存一个时间戳 , 发送请求时获取当前时间, 判定登录时间是否超过了当前时间, 如果超过的话 , 我就调用vue-x 清除token 跳转登录页 , 反之就发送请求头发送token在相应拦截器里 , 判定是否返回成功参数, 如果返回就retrue data , 如果没有, 就弹出对应错误信息, 返回错误信息, 在响应拦截器err 里进行判定 , 看是否和之前后端商量的错误状态码一致 , 一致的话就清理token 调转登录页