反应私人路由器重定向

Question

我有一个 api 来检查用户是否登录，我想通过检查来自 api 的响应代码来重定向页面，不知道如何写？

api:

 case 'loggedin':
                $result = $_SESSION['sessionOBJ']->logged_in();
                if($result == true){
                    echo json_encode($result); //login
                    http_response_code(200); 
                }else{
                    http_response_code(401); //not login
                } 
            break;

私有路由器：

import React from "react";
import { Route, Redirect } from "react-router-dom";
// token
import { getToken } from "../../utils/session";


const PrivateRouter =({component: Component, ...rest}) => {
    return (
        <Route
          {...rest}
          render={routeProps => (
          getToken() ? <Component {...routeProps} /> : <Redirect to="/" />    // "/" is login page path
          //getToken() === 200 ? <Component {...routeProps} /> : <Redirect to="/" />   
          )}
        />
      );
}

export default PrivateRouter;

和 getToken ：我想在响应代码为 200 时重定向到私人页面，否则留在登录页面。

export function getToken(){
    return axios.get(
                `http://localhost:80/doctorbooking/api/api?action=loggedin`,
                {withCredentials: true},
    ) 
}

Answer 1

查看文档，似乎 axios.get returns 一个 Promise。这意味着只有当 Promise 已经实现时，您才会知道用户是否通过了身份验证。在这种情况下，您需要在发生这种情况时更新组件。尝试这样的事情：

import React, {useState, useEffect} from "react";
import { Route, Redirect } from "react-router-dom";
import { getToken } from "../../utils/session";

const PrivateRouter = ({component: Component, ...rest}) => {

  const [ isAuthenticated, setIsAuthenticated ] = useState(null)

  useEffect(() => {

    getToken()
      .then(() => setIsAuthenticated(true))
      .catch(() => setIsAuthenticated(false))

  }, [])

  return (
    <Route
      {...rest}
      render={routeProps => (
        isAuthenticated === null
          ? null
          : isAuthenticated === false
            ? <Redirect to="/" />
            : <Component {...routeProps} />
      )}
    />
  );
}

export default PrivateRouter;

在上面，我仅在 Promise 已实现时才更新 isAuthenticated 状态。如果 isAuthenticated 设置为 null（最初是这样），这意味着我们仍在等待 Promise 结果。在这种情况下，我们只需为 React 渲染 null（这等于什么都没有）。相反，您可以渲染一个加载组件。

反应私人路由器重定向

react private router redirect

router

reactjs