Ant-design-pro: 🧐[问题] 如何控制非角色分类的路由权限？

[zhangsanplus]

🧐 问题描述

如果不用官方的权限验证组件，直接通过请求后端返回的菜单进行权限控制，如果后端返回了就表示用户拥有该页面权限，没有则表示没有页面权限该如何实现？

💻 示例代码

🚑 其他信息

[xiaohuoni]

你可以修改这里的权限规则。
https://github.com/ant-design/ant-design-pro/blob/bf3abbb89918f6f34d3f4967e2497c4301eca53f/src/utils/authority.ts#L4

[hsg4ok]

你可以修改这里的权限规则。
https://github.com/ant-design/ant-design-pro/blob/bf3abbb89918f6f34d3f4967e2497c4301eca53f/src/utils/authority.ts#L4

请问能给个Demo吗？我们也是遇到了这种问题，文档里只是笼统地提了一句，我们各种找，各种受挫，好耗费时间和精力啊

[liufa520]

同求

[Link-X]

加1

[liufa520]

我看v2版本的权限文档写得还算详细，v4版本的文档太简单了，麻烦大佬更新一下？谢谢

[Shijiuwei]

权限这一块有点乱，菜单权限和页面功能权限都是用户登陆后去获取的，那么模板这套基于角色的权限就完全不适应了，整个前端鉴权方式都要改。

[Shijiuwei]

说下简单的解决方法：
1、ant-design-pro/src/utils/authority.ts 这里不用改，还是从 localStorage 获取权限, 获取的格式用TS表示： string[] ；
2、login.ts model 登陆成功后使用 token 或 userId 从接口获取用户菜单权限和页面操作权限对象，遍历把 菜单权限对象的 path push 到 string[] 里，然后直接调用 ant-design-pro/src/utils/authority.ts 里的setAuthority 方法写到 localStorage里（后端为了登录性能考虑，一般情况下，登录成功不会连同当前登录用户的菜单权限、用户详细信息等，需要连表查询的数据一起返回）。注意 setAuthority 方法里的 reloadAuthorized() 方法，这里是关键；
3、layouts 文件夹下 BasicLayout.tsx 模板，找到 Authorized 组件，修改 authority 从routs 的 path 获取权限。如下：

<Authorized authority={authorized!.path} noMatch={noMatch}>
  {children}
</Authorized>

login model 中的 effect login 修改代码：

*login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      const menuAuthList = yield call(queryPrivilege, {
        userId: jwtDecode(response.data.token).userId,
      });
      if (menuAuthList && menuAuthList.data) {
        const authArrayPath = toAuthArray(menuAuthList.data);
        authArrayPath.push('/');
        const treeMenu = toTree(menuAuthList.data, 'id', 'pid', 0);
        yield put({
          type: 'saveTreeMenu',
          payload: treeMenu,
        });
        yield put({
          type: 'saveMenuToLocalStorage',
          payload: authArrayPath,
        });
      }

      // Login successfully
      if (response.code === 200 && response.success && response.data && response.data.token) {
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params as { redirect: string };
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = '/';
            return;
          }
        }
        // history.replace(redirect || '/');
        history.replace('/');
      }
    },

reducers:

saveTreeMenu(state: any, action: any) {
      return {
        ...state,
        treeMenu: action.payload,
      };
    },
    saveMenuToLocalStorage(state: any, action: any) {
      setAuthority(action.payload);
      return state;
    },

toAuthArray(),toTree() 方法自己在 utils/utils.ts里实现

[sunft1996]

你可以修改这里的权限规则。
https://github.com/ant-design/ant-design-pro/blob/bf3abbb89918f6f34d3f4967e2497c4301eca53f/src/utils/authority.ts#L4

请问能给个Demo吗？我们也是遇到了这种问题，文档里只是笼统地提了一句，我们各种找，各种受挫，好耗费时间和精力啊

可以参考这个项目，我是把所有菜单存在数据库，登录时候后端读取菜单列表并存到session中，当用户访问页面的时候自然会发起请求，进行请求拦截，用请求头中的referer（当前页面的url）和session中的菜单列表做对比，如果referer不在菜单列表中，就返回403。这样，就不会有前端通过浏览器地址栏可以访问任意页面的问题。

除此之外，我给每个页面做了子权限，可以进行后台配置，配置后的子权限只能被当前角色访问（无论是接口还是前端）：

最后，欢迎使用我的项目来扩展你的后台。当然记得点个 Star~ :stuck_out_tongue_winking_eye:

[hankaibo]

我有一个基于官方版本4做的js版本。
https://github.com/hankaibo/myantdpro
将官方ts文件完全js化，定期手动同步官方文件😂，并在其基础上集成了权限管理等公共页面，而且提供真实后台接口。
希望可以帮到各位。

[Liqiankun]

我用了官方的Demo，修改了当前的用户的权限也是不起作用啊？这个谁知道怎么弄？