История goBack при прямом доступе к маршруту - PullRequest
Новая
       10

История goBack при прямом доступе к маршруту

0 голосов
/ 01 мая 2018

В моем приложении реакции у меня есть защищенные маршруты, такие как / admin. Если пользователь получает доступ к этому маршруту, у которого нет прав на просмотр страницы, я заменяю маршрут на / запрещенный маршрут.

На запрещенной странице пользователь может нажать кнопку «Назад», которая работает нормально, если запрос поступил в маршрутизации приложения.

Что я могу сделать, если пользователь получает доступ к этому маршруту прямо через браузер? Я хочу, чтобы пользователь вернулся на стартовую страницу, но в настоящее время он перенаправляется на страницу моих поставщиков oidc.

1 Ответ

0 голосов
/ 01 мая 2018

Я не знаю, какую версию вы используете реагирующим маршрутизатором. Работает нормально в реакции роутера 4. 

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton />
      <ul>
        <li>
          <Link to="/public">Public Page</Link>
        </li>
        <li>
          <Link to="/protected">Protected Page</Link>
        </li>
      </ul>
      <Route path="/public" component={Public} />
      <Route path="/login" component={Login} />
      <PrivateRoute path="/protected" component={Protected} />
    </div>
  </Router>
);

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  signout(cb) {
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

const AuthButton = withRouter(
  ({ history }) =>
    fakeAuth.isAuthenticated ? (
      <p>
        Welcome!{" "}
        <button
          onClick={() => {
            fakeAuth.signout(() => history.push("/"));
          }}
        >
          Sign out
        </button>
      </p>
    ) : (
      <p>You are not logged in.</p>
    )
);

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

const Public = () => <h3>Public</h3>;
const Protected = () => <h3>Protected</h3>;

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  };

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true });
    });
  };

  render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (redirectToReferrer) {
      return <Redirect to={from} />;
    }

    return (
      <div>
        <p>You must log in to view the page at {from.pathname}</p>
        <button onClick={this.login}>Log in</button>
      </div>
    );
  }
}

render(<AuthExample />, document.getElementById('root'));
  1. проверьте рабочий пример по ссылке ниже. [https://stackblitz.com/edit/react-rxexop]
  2. проверьте документацию по реагированию на маршрутизатор 4 для справки Я взял ссылку только оттуда. [https://reacttraining.com/react-router/web/example/auth-workflow]
...