Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

权限路由问题 #1063

Open
xu-Aurora opened this issue Jun 3, 2020 · 8 comments
Open

权限路由问题 #1063

xu-Aurora opened this issue Jun 3, 2020 · 8 comments

Comments

@xu-Aurora
Copy link

权限路由是怎么弄的?没有找到对应的文件啊,你的路由在哪里配置的?所有文件都没有找到路由呢,按理来说路由不是配置在.umirc.js文件中的嘛?

@superlbr
Copy link
Collaborator

superlbr commented Jun 3, 2020

参考umi文档约定式路由

@xu-Aurora
Copy link
Author

那权限怎么配置,在哪个文件

@superlbr
Copy link
Collaborator

superlbr commented Jun 3, 2020

参考mock/user.js里的userPermission

@feibi
Copy link

feibi commented Sep 1, 2020

@superlbr 权限路由也没有阻止history.listen中触发的接口,这个要怎么处理呢

@zuiidea
Copy link
Owner

zuiidea commented Sep 2, 2020

@feibi

history.listen 一般在subscriptions 中,history.listen 内触需要一是加载好当前路由的model,二是路由匹配上,虽然页面没有权限,但是这两个条件都满足,所以会触发。

无权限时页面组件并没有渲染,所以要解决这个问题,可以将订阅操作迁移到组件内,参加下面代码

  1. user页面为例,删除 user/model.jssubscriptions 代码
...
- subscriptions: {
-    setup({ dispatch, history }) {
-      history.listen(location => {
-        if (pathToRegexp('/user').exec(location.pathname)) {
-          const payload = location.query || { page: 1, pageSize: 10 }
-          dispatch({
-            type: 'query',
-            payload,
-          })
-        }
-      })
-    },
-  },
...
  1. user/Index.js 内新增订阅至componentWillMount,函数式组件页面可以使用useEffect hook
...
class User extends PureComponent {
+  componentWillMount() {
+    const { location, dispatch } = this.props
+    const payload = location.query || { page: 1, pageSize: 10 }
+    dispatch({
+      type: 'user/query',
+      payload,
+    })
+  }
...

@feibi
Copy link

feibi commented Sep 2, 2020

@feibi

history.listen 一般在subscriptions 中,history.listen 内触需要一是加载好当前路由的model,二是路由匹配上,虽然页面没有权限,但是这两个条件都满足,所以会触发。

无权限时页面组件并没有渲染,所以要解决这个问题,可以将订阅操作迁移到组件内,参加下面代码

  1. user页面为例,删除 user/model.jssubscriptions 代码
...
- subscriptions: {
-    setup({ dispatch, history }) {
-      history.listen(location => {
-        if (pathToRegexp('/user').exec(location.pathname)) {
-          const payload = location.query || { page: 1, pageSize: 10 }
-          dispatch({
-            type: 'query',
-            payload,
-          })
-        }
-      })
-    },
-  },
...
  1. user/Index.js 内新增订阅至componentWillMount,函数式组件页面可以使用useEffect hook
...
class User extends PureComponent {
+  componentWillMount() {
+    const { location, dispatch } = this.props
+    const payload = location.query || { page: 1, pageSize: 10 }
+    dispatch({
+      type: 'user/query',
+      payload,
+    })
+  }
...

因为项目中history.listen比较多,都移动到组件内工作量很大,想着有没有其他方式

@wulaizi
Copy link

wulaizi commented Sep 7, 2022

没看懂+1 就是觉得很高级

@LDD123
Copy link

LDD123 commented Sep 7, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants