时间戳

首页 > 解决方案 > ReactJs 保护路由重定向/刷新问题

javascript - ReactJs 保护路由重定向/刷新问题

问题描述

使用react+ react-router-dom：

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

并以此保护路线：

路由器

const Router = () => {
    return (
        <Switch>
            <PrivateRoute exact path='/Panel' component={Panel}></PrivateRoute>
            <Route exact path='/Register' component={Register}></Route>
            <Route exact path='/Login' component={Login}></Route>
        </Switch>
    );
};

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            Auth.getAuth() ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        pathname: "/Login"
                    }}
                />
            )
        }
    />
);

认证

const Auth = {
    isAuthenticated: false,
    authenticate() {
        this.isAuthenticated = true;
    },
    signout() {
        this.isAuthenticated = false;
    },
    getAuth() {
        return this.isAuthenticated;
    }
};

所以这工作正常，用户可以轻松登录，注销，但问题是当用户登录时我想将用户重定向到/Panel路由，所以我尝试了：

window.location.href = "/Panel"

或者：

this.props.history.push('/Panel')

两者都重定向到/Login再次太快，但如果我点击Panel链接它会Panel路由。第二个问题是当我刷新这个地址上的页面时，/Panel它又让我回到了/Login原点。所以我要解决的是：

  1. 如何重定向到受保护的路由？
  2. 在受保护的路由上刷新页面时如何避免重定向？如果我键入此地址并输入它也不起作用。

已经看过这个话题并尝试过但没有成功：

使用 React Router 重定向页面的最佳方式是什么？

标签： javascriptreactjs

解决方案

对于第一个问题：

您可以将 url 保持在这样的状态，以便登录后您可以重定向到。

<Redirect
  to={{
    pathname: "/login",
    state: { from: props.location }
  }}
/>

在登录组件中，成功登录后，您可以重定向到：

const { state } = this.props.location;
window.location = state ? state.from.pathname : "/";

对于第二个问题：

一种替代解决方案是将登录状态保留在 localStorage 中，以便在刷新后应用程序可以从那里读取。这通常是从登录 api 发送一个 jsonwebtoken 到客户端，并将令牌保存到 localStorage。

推荐阅读