处理受保护的路由逻辑答案

【问题标题】：handle protected route logic处理受保护的路由逻辑
【发布时间】：2021-04-26 14:16:40
【问题描述】：

我正在为我的 react 项目创建一个受保护的路由，但上下文值和 redux reducers 数据不是持久的。那么设置的最佳方式是什么，例如如果用户已登录，则将isVerified 设置为true。如果isVerified === true 转到主页，否则重定向到登录，isVerified 需要在每次更改路由或刷新时进行变异，因为上下文或 redux 数据不是持久的。

我是否需要创建一个单独的后端 api 来检查来自客户端的令牌？然后我会在主App.tsx 中添加一个useEffect，类似于：

useEffect(() => {
    /*make api call, and pass the token stored in the localStorage. If 
    verified success then: */
    setIsVerified(true)
}, [])

然后我可以使用isVerified 到我的受保护路线

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您可以创建一个中间件组件来包装受保护和不受保护的组件路由。在每个内部只检查用户是否已登录，然后有条件地呈现。

我通常是这样实现的，

受保护：

// AuthRoute.js
import React, { useEffect, useState } from "react";
import { Redirect, Route } from "react-router-dom";


export const AuthRoute = ({ exact = false, path, component }) => {
  const [isVerified, setIsVerified] = useState(false);

  const checkLoginSession = () => {
  // Write your verifying logic here
    const loggedUser = window.localStorage.getItem("accessToken") || "";
    return loggedUser !== "" ? true : false;
  };


  useEffect(() => {
    (async function () {
      const sessionState = await checkLoginSession();
      return setIsVerified(sessionState);
    })();
  }, []);

  return isVerified ? (
    <Route exact={exact} path={path} component={component} />
  ) : (
    <Redirect to={"/login"} />
  );
};

不受保护：

import React from "react";

import { Redirect, Route } from "react-router-dom";
import { useEffect, useState } from "react";

export const NAuthRoute = ({ exact = false, path, component }) => {
  const [isVerified, setIsVerified] = useState(false);

  const checkLoginSession = () => {
 // Write your verifying logic here
    const loggedUser = window.localStorage.getItem("accessToken") || "";
    return loggedUser !== "" ? true : false;
  };

  useEffect(() => {
    (async function () {
      const sessionState = await checkLoginSession();
      return setIsVerified(sessionState);
    })();
  }, []);

  return isVerified ? 
     <Redirect to={"/"} /> 
     : <Route exact={exact} path={path} component={component} />;
};

【讨论】：