玩转Vben Admin第2改：配置权限模式

Vben设计了2种权限模式，分别是【前端角色权限(ROLE)】和【后端动态获取(BACK)】

 详细说明请参考https://doc.vvbin.cn/guide/auth.html

为了打造【轻前端重后端】我们希望后端可以操纵这个权限模式，而无需通过重新编译【前端代码】的方式实现模式切换

 

第一步：打开 \src\utils\http\axios\index.ts 文件，添加import代码

import { useAppStore } from '/@/store/modules/app';

　　

然后在169行附近找到下面“响应拦截器处理”参考修改代码

  /**
   * @description: 响应拦截器处理
   */
  responseInterceptors: (res: AxiosResponse<any>) => {
    if (res.data.hasOwnProperty('setProjectConfig')) {
      const appStore = useAppStore();
      appStore.setProjectConfig(res.data.setProjectConfig);
    }
    return res;
  },

 

第二步：修改后端代码，参考下面代码

  router.get(`${sPathRoot}/getUserInfo`, async (ctx, next) => {
    ctx.body.code = 0;
    ctx.body.type = 'success';
    ctx.body.message = 'ok';
    ctx.body.setProjectConfig = {};
    ctx.body.setProjectConfig['permissionMode'] = 'ROUTE_MAPPING';
    ctx.body.setProjectConfig['permissionMode'] = 'ROLE';
    ctx.body.setProjectConfig['permissionMode'] = 'BACK';
    ctx.body.result = {
      "userId": "1",
      "username": "vben",
      "realName": "Vben Admin",
      "avatar": "https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640",
      "desc": "manager",
      "password": "123456",
      "token": "fakeToken1",
      "homePath": "/dashboard/analysis",
      "roles": [
        {
          "roleName": "Super Admin",
          "value": "super"
        }
      ]
    };
  });

完成