Ant-design-pro: 请问v4版本,菜单虽然根据权限隐藏了, 但是手动输入地址, 账号无权限依然会进去页面,不会跳转403页面,请问该如何修复跳转403页面

[z-lionel]

问题描述 如题, 麻烦大佬们帮助下

[z-lionel]

或者有没有什么方法可以获取当前路由的权限?

[z-lionel]

通过在BasicLayout.jsx里面用下方法修改, 可以实现没有权限时候跳转403

基本思路就是在获取页面的时候能获取到当前路由的authority
,然后在对比antd-pro-authority自己的权限,如果权限不够的话就跳转/403.

然后找了半天,还是没有找到通过什么方法能够直接获取当前路由的权限,
最后只能在BasicLayout的menuDataRender里面获取到,所以就用下面的方法实现没有权限就跳转.
感觉很low.

希望各位大侠能够提供下更好的方法

import router from 'umi/router';
import { getAuthority } from '@/utils/authority';

const menuDataRender = menuList => {
return menuList.map(item => {
const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
if (item.authority) {
if (location.hash.endsWith(item.path)) {
const currentAuthority = getAuthority()[0];
const pageAuthority = item.authority;
const hasAuthority = currentAuthority.find(item => {
return pageAuthority.find(opt => opt === item);
});
if (!hasAuthority) {
router.push('/403');
}
}
}
return Authorized.check(item.authority, localItem, null);
})};

[chenshuai2144]

你的解决方法是最好的了

[z-lionel]

你的解决方法是最好的了

那有没有直接获取当前页面路由权限的方法?

[1009466147]

这判断当前页不行吧，如何才能够获取到当前路由呢

[z-lionel]

这判断当前页不行吧，如何才能够获取到当前路由呢

location 对象里面就有

[1009466147]

这判断当前页不行吧，如何才能够获取到当前路由呢

location 对象里面就有

那就不能再url后面拼参数了

[z-lionel]

这判断当前页不行吧，如何才能够获取到当前路由呢

location 对象里面就有

那就不能再url后面拼参数了

看路由用的什么模式了,history的话要多做点判断,
如果用的不是history的话,用location.pathname就可以了

[chenshuai2144]

直接 import config.ts 好了

[z-lionel]

直接 import config.ts 好了

好的，谢谢

[poyiding]

还有一个种解决办法是结合后端判断，进入这个无权限的页面一般会请求后端，后端返回一个无权限的状态码，跳403。因此，可以在统一封装的 request中判断。

[wuhao5436]

还有一个种解决办法是结合后端判断，进入这个无权限的页面一般会请求后端，后端返回一个无权限的状态码，跳403。因此，可以在统一封装的 request中判断。

这是两回事情，路由级别的403是要跳转到403页面的，接口的403一般使用弹框，message这类的局部提示更好一点

[serical]

同遇到这个问题，有个新的发现src/utils/utils.js的getAuthorityFromRouter方法只遍历了一层，改了下就可以了

export const getAuthorityFromRouter = (router = [], pathname) => {
  const pathArray = [];
  recursionPath(router, pathArray);
  const authority = pathArray.find(({ path }) => path && pathRegexp(path).exec(pathname));
  if (authority) return authority;
  return undefined;
};

/**
 * 递归查找路由
 * @param router
 * @param result
 */
function recursionPath(router = [], result = []) {
  router.forEach(v => {
    if (v.routes) {
      recursionPath(v.routes, result);
    } else {
      result.push(v);
    }
  });
}

[purplepeng]

这个方法可行 @serical