3

我在我的应用程序中使用ReactJS和react-router。我需要做下一件事：当用户打开页面时 - 检查他是否登录，如果是，则重定向到/auth页面。我正在做接下来的事情：

componentWillMount: function() {
    if (sessionStorage["auth"] == null) {
        this.transitionTo("/auth");
    }
},

在浏览器 url 中，它确实会重定向到/auth，渲染/auth页面，然后用当前组件覆盖它。所以这里的问题是：如何取消当前组件的渲染，或者如何以其他方式进行重定向？谢谢。

4

1 回答 1

0

看看 react-router 示例 auth-with-shared-root：https ://github.com/rackt/react-router/tree/master/examples/auth-with-shared-root

他们基本上做的是检查去哪里的路线的输入。查看文件config/routes.js第 36、51 和 89 行：

{ onEnter: redirectToLogin,
      childRoutes: [
        // Protected nested routes for the dashboard
        { path: '/page2',
          getComponent: (location, cb) => {
            require.ensure([], (require) => {
              cb(null, require('../components/PageTwo'))
            })
          }
        }
        // other protected routes...
     ]
}

/page2当路由进入或推送到该路由时，该路由将调用函数redirectToLogin 。如果用户通过了身份验证，该函数可以检查auth.loggedIn()

function redirectToLogin(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

如果用户未登录，该函数将替换到 的路由/login，用户可以在其中进行身份验证。

于 2016-01-08T16:21:39.300 回答