egg+vue 管理后台系统的权限认证与控制

前言

公司最近成立新项目组，做新的项目。公司的后台业务需求不怎么多，然后就想趁这次的时间好好折腾下。管理后台前端使用的 iview, 后端使用的是 egg.js, 脚手架基于 easywebpack。

授权流程 (直接上图吧)

权限控制

1. 页面级控制， 前端定义路由meta新增permission字段来判断侧边menu菜单是否显示

// 路由meta 定义 permission
 meta: {
            icon: "ios-contacts",
            title: "用户管理",
            permission: "setting.user.view"
        }
复制代码

2. 按钮级控制，自定义指令

// 路由meta 定义 permission
<Hello v-permission="['key1','key2'] />
复制代码

3. 关键接口控制，node转发服务器接口，中间件判断是否在权限内操作

有人可能会说了，这个接口鉴权咋不丢给后端去做啊！事实是后台的同学初期定方案都讲不清楚怎么做，初期还说没时间做接口拦截。。。然后就自己定了这套前端鉴权和接口拦截的方案

// 路由文件的定义 config.default.js
exports.api = {
     ADMIN: {
           prefix: "http://39.108.xxx.173:8181/api",、
           apis: {
               // 接口定义的几种方式
               LOGIN: "/auth/backend/login", // 登录地址
               LOGIN_OUT: "/backend/users/logout/$p1$", // resful 风格的接口，$p1$ 是后续动态拼接的占位符
               ADD_ROLE: {
                   name: "/backend/roles",
                   key: "setting.add.role" // 新增角色，需要鉴权 就定义 key
               },
           }
     }
}

// 前端请求示例 /api/__proxy_gateway_method_id=API_KEY_NAME&__gateway_place=ADMIN

router.get("/api/__proxy", controller.api.proxy.__proxy)
router.post("/api/__proxy", controller.api.proxy.__proxy)
router.put("/api/__proxy", controller.api.proxy.__proxy)
router.delete("/api/__proxy", controller.api.proxy.__proxy)


/*
*  node 中间件接口拦截 
*  1. session 是否存在
*  2. 客户端token与session的token是否一致
*  3. 前端通过 /api/__proxy 接口发出的请求是否在权限内。config.default.js 定义
**/

// 部分代码示例
module.exports = () => {
   return async function (ctx, next) {
       let javaToken = ctx.cookies.get("javaToken", {
           encrypt: true,
       })
       let sessionUser = ctx.session.user || {}
       if (needPrmissionPath.indexOf(ctx.request.path) !== -1) {
           let {token, user_info, super_admin} = sessionUser
           if (Object.keys(sessionUser).length && (javaToken === token) && user_info.status !== 2) {
               let {__gateway_method_id, __gateway_place} = ctx.request.query
               let apiKey = utils.getApiKey(ctx, __gateway_method_id, __gateway_place)
               if (apiKey) {
                   if ((user_info.menus && user_info.menus.indexOf(apiKey)) !== -1 || super_admin) {
                       await next()
                   } else {
                       ctx.body = {code: 4001, msg: "你没有该接口的操作使用权限"}
                   }
               } else {
                   await next()
               }
           } else {
               ctx.status = 401
               ctx.body = {code: 401, msg: "小子，别以为我不知道你要干啥~"}
           }
       } else {
           await next()
       }
   }
}

复制代码

未完待续 （改天不加班了接着写）

这个管理后台的后期开发中集成了不少的功能。图片压缩，钉钉推送，模板生成，懒人的一句命令自动构建重启服务。

"生成模板的.mp4( https://g.baojiesports.com/bps/0ae8d945/page.mp4 )"

"linux服务部署(https://g.baojiesports.com/bps/5c288edb/auto.mp4)"

转载于:https://juejin.im/post/5cb895d4e51d456e4e08864b