Question

我希望在让用户访问某条路径之前确保用户存在。

我有一个获取用户的函数，还有一个需要auth的函数：

function getUser() {
  $.ajax({
    url: '/getUser',
    method: 'GET'
  }).done(data => {
    if(data.user == "no user"){
      console.log('permission denied');
      alert('you must be logged in to access this page.')
      return null
    } else {
      console.log('permission granted');
      return true
    }
  });
}

function requireAuth(nextState, replace) {
  if (!getUser()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    });
  }
}

然后我应用require函数 onEnter

  <Route path="/modules" component={ModulesData} onEnter={requireAuth} />

我可以看到我的控制台日志是否正确，无论用户是否登录，无论用户状态如何，我们总是将其重新路由回登录页面。

这是我的 index.js ，为了更加清晰：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory, IndexRoute, Redirect } from 'react-router';

import App from './App';

require('./stylesheets/main.scss');



function getUser() {
  $.ajax({
    url: '/getUser',
    method: 'GET'
  }).done(data => {
    if(data.user == "no user"){
      console.log('permission denied');
      alert('you must be logged in to access this page.')
      return null
    } else {
      console.log('permission granted');
      return true
    }
  });
}

function requireAuth(nextState, replace) {
  if (!getUser()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    });
  }
}

render((
  <Router history={browserHistory}>

    <Route path="/" component={App}>

      <Route path="/modules" component={ModulesData} onEnter={requireAuth} />

    </Route>
  </Router>
), document.getElementById('app'));

Answer 1

尝试在componentDidMount或componentWillReceiveProps而不是onEnter中进行验证。此外，如果没有用户，请尝试返回false而不是null。

React Router：Auth Flow无法正常工作

1 个答案: