Блог

Я использую функциональный компонент, который обеспечивает аутентификацию для определенных маршрутов, таких как / dashboard, используя аутентификацию на стороне сервера, происходящую в useeffect функции моего приложения.

Аутентификация работает нормально, а также, когда я нажимаю кнопку панели мониторинга, я попадаю на панель мониторинга, когда я вхожу в систему, иначе перенаправляется на домашнюю страницу.

Проблема возникает, когда я перезагружаю страницу / dashboard . В это время я наблюдаю, что все повторно отображается, и перед тем, как пройти use effect, оно сначала переходит из AuthenticatedRoute, который не дает аутентификации, потому что в use effect происходит аутентификация на стороне сервера, и я напрямую перенаправляюсь на домашнюю страницу, даже когда я вошел в систему.

App.js

 const AuthenticatedRoute = ({ children, isAuthenticated , ...rest }) => {
  return (
    <Route
      {...rest}
      render={() =>
        isAuthenticated ? (
            <div>{children}</div>
        ) : (
          <Redirect to="/home" />)}
    ></Route>
  );
};
  

Код маршрута:

App.js

 <AuthenticatedRoute isAuthenticated = {isAuthenticated} path="/dashboard">
    <AgentDashboard />
</AuthenticatedRoute> 
  

App.js

 function App() {

    const [authTokenValid, setauthTokenValid] = useState(false)
    
    useEffect(() => {
    
        const token = localStorage.getItem('Authorization')
        const authMainPageCheck = async () => {
            await axios.post(tokenAuthCheckURL , {
                'token':token,
            }).then(result => result.data).then(
                result => {
                    if(result.status === 200){
                        console.log("Authentication Given ")
                        setauthTokenValid(true)
                    }
                    else{
                        console.log("Authentication Not Given ")
                        setauthTokenValid(false)
                    }
                })
        }
        authMainPageCheck()
}, [])
  

Пожалуйста, попробуйте этот код ниже:

 
import React, { useEffect, useState } from "react";
import { Route, Redirect, BrowserRouter } from "react-router-dom";
// import axios from "axios";

// @ts-ignore
const AuthenticatedRoute = ({ children, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      render={() =>
        isAuthenticated ? (
          <div>
            {children}
          </div>
        ) : (<Redirect to="/error" />)
      }
    ></Route>
  );
};


export const App = () => {

  // Set initial value to null
  const [authTokenValid, setauthTokenValid] = useState(null)

  useEffect(() => {

    // Wait for request to complete
    // Example...
    setTimeout(() => {
      // @ts-ignore
      setauthTokenValid(true);
    }, 3000);

    // const token = localStorage.getItem('Authorization');
    // const authMainPageCheck = async () => {
    //   await axios.post(tokenAuthCheckURL, {
    //     token,
    //   }).then(result => result.data).then(
    //     result => {
    //       if (result.status === 200) {
    //         console.log("Authentication Given ")
    //         setauthTokenValid(true)
    //       } else {
    //         console.log("Authentication Not Given ")
    //         setauthTokenValid(false)
    //       }
    //     }
    //   )
    // }
  }, []);

  if (authTokenValid === null)
    // Wait Until a Non Null Response Comes....
    return (<h1>Loading...</h1>); // Create a new loading component...

  else
    return (
      <BrowserRouter>

        <AuthenticatedRoute isAuthenticated={authTokenValid} exact path="/">
          <h1>This is Authenticated Home!!!</h1>
        </AuthenticatedRoute>

        <AuthenticatedRoute isAuthenticated={authTokenValid} exact path="/dashboard">
          <h1>This is Authenticated Dashboard!!!</h1>
        </AuthenticatedRoute>

      </BrowserRouter>
    );
}