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"
}
]
};
});
完成