Umi: 关于权限路由的实现

Created on 16 Jul 2018 · 13Comments · Source: umijs/umi

这个问题是从一开始使用umi就存在的疑问。
现在umi提供的权限路由的配置方式是

pages: {
    '/user': { Route: './src/components/Authorized/AuthorizedRoute.js'}
  },

一个路由配置一个路由守卫的形式。这样的配置方式应该是应用于少部分页面需要配置权限的场景。
但是在实际项目中使用，我们这边真实的项目需求是，大部分路由需要添加权限，少部分页面不需要。
所以我一直希望这个配置采用通配符的形式实现。
于是有了https://github.com/umijs/umi/pull/403

//支持匹配的方式配置
//如
 pages: {
    '/': { Route: './src/components/Authorized/AuthorizedRoute.js',ignore:'/User' }
  },
//所有的路由除了```*/User/*```以外的路由都会添加权限路由（路由守卫）

接着感觉这样实现存在其他问题，于是又有了https://github.com/umijs/umi/pull/548

增加权限路由，

authorize: [
  {
    guard: "./routes/PrivateRoute.js"
    exclude: "scroll-to-top/a"
  },
  {
    guard: "./routes/PrivateRoute.js",
    include: /\/list/
  },
  {
    include: "scroll-to-top",
    exclude: "scroll-to-top/a"
  },
  {
    guard: "./routes/PrivateRoute.js",
    include: "scroll-to-top",
    exclude: "scroll-to-top/a"
  }
];

authorize必须是一个数组
include和exclude的值为正则表达式或者字符串
include表示：包含这个字符串或者满足这个正则会被**添加**
exclude表示：包含这个字符串或者满足这个正则会被**忽略**
include不存在，则当前设置无效，如上述第一条
exclude不存在，则当前不忽略，如上诉第二条
guard不存在，则当前设置无效，如上述第三条

但是我又在[email protected]的todo list里面看到，

[ ] 多权限，权限的批量修改
所以我想请教一下，关于这个问题，是怎么考虑的？

Source

xiaohuoni

Most helpful comment

我這邊的做法如下
1.菜單部分根據server的api隱藏
2.page部分寫一個共用的HOC確認權限，若權限不符則redirect到登入頁面

MengWeiChen on 14 Aug 2018

👍3

All 13 comments

@byan 服务端返回的menu只是起到隐藏的效果，和权限并没有什么关系吧？

ghost on 19 Jul 2018

看怎么可以处理动态的路由数据，比如登陆后能够过滤router.js里面的数据并同步到路由组件里面。

xiechao1211 on 20 Jul 2018

@Instanced 客户端的 menu list才只是起到隐藏效果。不能相信客户端的数据，最终还是要到服务端验证的。不可能客户端发来一个请求服务端就无条件响应。既然如此，为什么不直接点，由服务端直接返回菜单列表呢？那样即便用户在浏览器控制台伪造了服务端返回的数据，最终跟服务端交互时也会被拦掉。

一句话：不能让客户端开发人员决定能否访问某个菜单的权限，这些只能是存储到服务端并由服务端下发的。

byan on 20 Jul 2018

这样也可以顺道解决动态路由数据的问题，因为本来就是从服务端下发的，必须动态~

byan on 20 Jul 2018

@byan 光解决菜单感觉还是不够可靠的，还需要同步处理后台返回的路由数据，否则某个页面虽然没有菜单出现，但是他却可以进入（该页面并不与后台交互的话）

xiechao1211 on 20 Jul 2018

@xiechao1211 理论上，你没办法阻止这种情况。毕竟代码就在用户浏览器上。他想改改谁也挡不住。当然开发时前后端通一下气，通知一下菜单的变化互相适配还是必要的。但我的意思是不值得在客户端的菜单权限验证上花费太大力气，因为绕开很容易，有点掩耳盗铃的意味。页面上的数据都是通过 API 返回的，为什么菜单数据就不可以呢？

我这边是这么处理菜单的，就是登录时用户的可用菜单树会随着 token 已经用户信息本身一块下发供前端使用，客户端再怎么修改也不会有安全问题。反正代码就在你浏览器本地，怎么改随你的便，我也没办法阻止。

byan on 20 Jul 2018

@byan 如果使用UMI自动生成路由这一特性，权限这块是无可避免的，虽然服务端可过滤掉，但无疑大大降低了交互体验。就UMI目前的权限配置，确实是大大降低了开发效率。这个看后面怎么处理吧！

ghost on 20 Jul 2018

或者动态自动生成路由。定义好格式，然后随便你是硬编码还是从远程、本地存储甚至是某个对象属性等地方获取。

byan on 20 Jul 2018

react的特性是组件，动态路由的话目前也只能是在组件内部做拦截处理了。

xiechao1211 on 20 Jul 2018

@xiaohuoni 抱歉哈。顺便问个问题，.umirc.js里的pages选项，ignore参数好像是不生效的现在？
如果umi可以动态生成路由文件(pages/.umi/router.js)就更好

xiechao1211 on 20 Jul 2018

这是两个没有被收录的pr（捂脸）

xiaohuoni on 20 Jul 2018