egg+vue 管理後臺系統的權限認證與控制

時間 2019-12-09

標籤 egg+vue egg vue 管理後臺系統權限認證控制简体版

原文原文鏈接

前言

公司最近成立新項目組，作新的項目。公司的後臺業務需求不怎麼多，而後就想趁此次的時間好好折騰下。管理後臺前端使用的 iview, 後端使用的是 egg.js, 腳手架基於 easywebpack。javascript

受權流程 (直接上圖吧)

權限控制

頁面級控制，前端定義路由meta新增permission字段來判斷側邊menu菜單是否顯示

// 路由meta 定義 permission
 meta: {
            icon: "ios-contacts",
            title: "用戶管理",
            permission: "setting.user.view"
        }
複製代碼

按鈕級控制，自定義指令

// 路由meta 定義 permission
<Hello v-permission="['key1','key2'] />
複製代碼

關鍵接口控制，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()
       }
   }
}

複製代碼