ReactJs受保护的路由重定向/刷新问题

21 浏览
0 Comments

ReactJs受保护的路由重定向/刷新问题

使用 react + react-router-dom：

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

并通过以下方式保护路由：

Router

const Router = () => {
    return (
        
            
            
            
        
    );
};
const PrivateRoute = ({ component: Component, ...rest }) => (
    
            Auth.getAuth() ? (
                
            ) : (
                
            )
        }
    />
);

Auth

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. 如何在刷新受保护的路由页面时避免重定向？如果我输入该地址并按下Enter键，它也不起作用。

已经看过这个话题并尝试过，但没有成功：What is the best way to redirect a page using React Router?

0

1 答案

0 Comments

ReactJs protected route redirect/refresh issue

在React中，当我们使用受保护的路由时，可能会遇到重定向/刷新问题。在本文中，我们将讨论这个问题的原因以及解决方法。

问题一：重定向到登录页面

当用户访问需要登录才能访问的页面时，我们希望在用户没有登录的情况下将其重定向到登录页面。为了实现这一点，我们可以将当前页面的URL保存在状态中，并在登录成功后将用户重定向回原来的页面。

解决方法：

在需要受保护的路由组件中，我们可以使用<Redirect />组件将用户重定向到登录页面，并将当前页面的URL作为state传递给登录页面。

示例代码：

在登录页面组件中，当登录成功后，我们可以从URL的state中获取之前保存的URL，并将用户重定向回原来的页面。

示例代码：

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

问题二：刷新后登录状态丢失

在React应用中，当用户刷新页面时，由于React的单页应用特性，整个应用会重新加载，导致登录状态丢失。为了解决这个问题，我们可以将登录状态保存在localStorage中，以便在刷新后读取。

解决方法：

在登录API成功返回登录凭证（例如jsonwebtoken）时，将该凭证保存在localStorage中。

示例代码：

// 登录API成功后，保存凭证到localStorage
localStorage.setItem("token", token);

在应用初始化时，我们可以从localStorage中读取登录凭证，并根据凭证的存在与否来判断用户是否已登录。

示例代码：

// 从localStorage中读取凭证
const token = localStorage.getItem("token");
// 根据凭证判断用户是否已登录
if (token) {
  // 用户已登录
} else {
  // 用户未登录
}

通过将登录状态保存在localStorage中，即使在刷新页面后，应用仍能读取到之前保存的登录状态，从而解决了刷新后登录状态丢失的问题。

通过以上的解决方法，我们可以在React中处理受保护的路由重定向和刷新问题，提升用户体验并增强应用的安全性。

0