如何在 React Router DOM v5 和 v6 中实现受保护的路由？

如何使用 React Router DOM 创建受保护的路由？

问题

此代码利用 React Router DOM 并将响应存储在 localStorage 中，应创建一个受保护的路由，允许用户在返回页面后继续查看其详细信息。登录后，他们应该被重定向到仪表板页面，但实现未能实现此目的。

路线页面

import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch,BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <browserrouter>
      <switch>
        {authLogin ? (
          
            <route path="/dashboard" component="{Dashboard}" exact></route>
            <route exact path="/About" component="{About}"></route>
          >
        ) : (
          <route path="/" component="{Login}" exact></route>
        )}

        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

export default Routes;

上下文页

import React, { Component, createContext } from "react";
import axios from "axios";

export const globalC = createContext();

export class Gprov extends Component {
  state = {
    authLogin: null,
    authLoginerror: null,
  };

  componentDidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    if (localData) {
      this.setState({
        authLogin: localData,
      });
    }
  }

  loginData = async () => {
    let payload = {
      token: "ctz43XoULrgv_0p1pvq7tA",
      data: {
        name: "nameFirst",
        email: "internetEmail",
        phone: "phoneHome",
        _repeat: 300,
      },
    };
    await axios
      .post(`https://app.fakejson.com/q`, payload)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            authLogin: res.data,
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((err) =>
        this.setState({
          authLoginerror: err,
        })
      );
  };

  render() {
    // console.log(localStorage.getItem("loginDetail"));
  }
}

解决方案

1. React Router DOM v6

在版本 6 中，使用 auth 布局组件而不是自定义路由组件：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return authLogin
    ? <outlet></outlet>
    : <navigate to="/login" replace state="{{" from: location></navigate>;
}

更新你的路由：

<browserrouter>
  <routes>
    <route path="/" element="{<PrivateRoutes"></route>} >
      <route path="dashboard" element="{<Dashboard"></route>} />
      <route path="about" element="{<About"></route>} />
    
    <route path="/login" element="{<Login"></route>} />
    <route path="*" element="{<PageNotFound"></route>} />
  </routes>
</browserrouter>

2. React Router DOM v5

在版本 5 中，创建一个 PrivateRoute 组件：

const PrivateRoute = (props) => {
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return authLogin ? (
    <route></route>
  ) : (
    <redirect to="{{" pathname: state: from: location></redirect>
  );
};

更新您的登录组件：

export default function Login() {
  const { authLogin, loginData } = useContext(globalC);
  const location = useLocation();
  const history = useHistory();

  useEffect(() => {
    if (authLogin) {
      const { from } = location.state || { from: { pathname: '/' } };
      history.replace(from);
    }
  }, [authLogin, history, location]);

  return (
    ...
  );
}

更新您的路由：

function Routes() {
  return (
    <browserrouter>
      <switch>
        <privateroute path="/dashboard" component="{Dashboard}"></privateroute>
        <privateroute path="/About" component="{About}"></privateroute>
        <route path="/login" component="{Login}"></route>
        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

以上是如何在 React Router DOM v5 和 v6 中实现受保护的路由？的详细内容。更多信息请关注PHP中文网其他相关文章！