想问下 react-router v4 的用法

Question

我现在正在学习 react，有些地方不知道怎么做才好。
项目进来时，会先请求后台判断是否有权限，用 redux 去存储状态值。

export const AuthRoute = ({ component: Component, redirect, loginStatus, ...data }) => (
  <Route {...data} render={props => (
    loginStatus ? (<Component {...props} />) : (
      <Redirect to={redirect || {
        pathname: '/home'
      }} />
    )
  )} />
)

用 loginStatus 去判断是否有权限。

<Switch>
        <AuthRoute path='/' exact component={IndexPage} loginStatus={loginStatus} />
        <AuthRoute path='/home' exact component={HomePage} loginStatus={!loginStatus} redirect={{ pathname: '/' }} />
</Switch>

当去一个 news 的页面，需要有权限才能显示。所以在请求接口时(loginStatus 还没改改变时)，就会重定向到 /home 页面。当请求完毕，更新了 redux ，变成有权限。

/home 页面有权限的就话就会重定向到 / 页面。

期望

权限变更后（有权限）应该跳回去刚进来时的页面（/news）。

现在

权限变更后，只会跳去定义好的重定向页面(/)。

那我是不是要拿到因没权限而重定向前的路径，当有权限后，就应该重定向回那个路径呢？

有没有什么好的解决方法。。。我在 github 找 demo 也找不到好的处理方法。

Answer 1

当去一个 news 的页面，需要有权限才能显示。所以在请求接口时(loginStatus 还没改改变时)，就会重定向到 /home 页面。当请求完毕，更新了 redux ，变成有权限。

这种操作是有问题的，你不应该在没判定到有无权限之前跳转页面，而是应该在判断到没权限时跳转到登录页面。

简单来说，所有页面用户都可以先进去，但是如果没有权限，就赶回登录页。

Answer 2

换个思路试试，你这思维方式是一个使用者的思考方式。
首先：前端拿到的数据都应该是有权限的。只要接口返回的数据，前端全部认为是有权限的，否则权限控制毫无意义。
第二：当用户登录时，就应该把该用户所能访问的菜单，也就是router的内容给你。
第三：在router的最后一个Router中，加入一个404或者403的page,当请求找不到router时，直接进入这个页面。也就认为是无权限。