身份验证后无法重定向 Ionic React 专用路由

Question

我想使用 Ionic React 创建一个 ProtectedRoute。我一直在用这个来寻求帮助

我关闭了，但在成功验证后，导航没有发生，页面停留在登录页面。

例如

http://localhost:8100/ 正确带我去 http://localhost:8100/登录

但是登录成功后还是在登录页面

谁能给我指出正确的方向？下面的代码

App.tsx

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import React from 'react';
import { useEffect } from "react";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";
import { useAuth0 } from "@auth0/auth0-react";
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import './theme/theme.css'

import AddReceipt from './pages/AddReceipt';
import EditReceipt from './pages/EditReceipt';
import { callbackUri } from "./auth.config";
import SideDrawer from './components/SideDrawer';
import ProtectedRouteComponent,{ProtectedRouteProps} from './components/ProtectedRouteComponent';
import Login from './pages/Login';

const App: React.FC = () => {
  const { handleRedirectCallback } = useAuth0();

  useEffect(() => {
    CapApp.addListener("appUrlOpen", async ({ url }) => {
      if (url.startsWith(callbackUri)) {
        if (
          url.includes("state") &&
          (url.includes("code") || url.includes("error"))
        ) {
          await handleRedirectCallback(url);
        }

        await Browser.close();
      }
    });
  }, [handleRedirectCallback]);

  return(
  <IonApp>
    <IonReactRouter>
      <SideDrawer/>
      <IonRouterOutlet id="main">
         <ProtectedRouteComponent authenticationPath="/login" exact={true} path="/">
            <Home />
          </ProtectedRouteComponent>
          <ProtectedRouteComponent authenticationPath='/login' exact path="/add-receipt">
            <AddReceipt/>
          </ProtectedRouteComponent>
        <Route exact path="/edit-receipt/:receiptid">
          <EditReceipt></EditReceipt>
        </Route>
        <Route exact path='/login'>
          <Login></Login>
        </Route>      
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>);
};

export default App;

ProtectedRouteComponent.tsx

import React, { useEffect, useState } from "react";
import { Route,Redirect,RouteProps } from "react-router";
import { useAuth0 } from "@auth0/auth0-react";

export type ProtectedRouteProps = {
    //isAuthenticated: boolean;
    authenticationPath: string;
} & RouteProps


export const ProtectedRouteComponent:React.FC<ProtectedRouteProps>=props=>{
    const {isAuthenticated}=useAuth0();
    console.log(isAuthenticated)

    const[autheticated,setAuthenticated]= useState(false);
    useEffect(() => {
        if (isAuthenticated) {
            setAuthenticated(true);
            console.log('authenticated')
        }
    }, [isAuthenticated]);

        if(!autheticated){
            return <Redirect to='/login'></Redirect>
        }else{
            console.log({...props})
            return <Route {...props}/>   
        }
}


export default ProtectedRouteComponent

Answer 1

这对我有用。希望这对某人有帮助

步骤 1.) 删除了 ProtectedRoute 文件

步骤 2.) 将 App.tsx 更改如下

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import React from 'react';
import { useEffect } from "react";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";
import { useAuth0 } from "@auth0/auth0-react";
import { Storage } from '@capacitor/storage'
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import './theme/theme.css'

import AddReceipt from './pages/AddReceipt';
import EditReceipt from './pages/EditReceipt';
import { callbackUri } from "./auth.config";
import SideDrawer from './components/SideDrawer';
import ProtectedRouteComponent, { ProtectedRouteProps } from './components/ProtectedRouteComponent';
import Login from './pages/Login';
import Landing from './pages/Landing';

const App: React.FC = () => {
  const { handleRedirectCallback, isAuthenticated } = useAuth0();

  useEffect(() => {
    CapApp.addListener("appUrlOpen", async ({ url }) => {
      console.log('Hello');
      if (url.startsWith(callbackUri)) {
        if (
          url.includes("state") &&
          (url.includes("code") || url.includes("error"))
        ) {
          await handleRedirectCallback(url);
        }

        await Browser.close();
      }
    });
  }, [handleRedirectCallback]);



  return (
    <IonApp>
      <IonReactRouter>
        <SideDrawer />
        <IonRouterOutlet id="main">
          <Route exact path="/home" render={(props) => {
            return isAuthenticated ? <Home /> : <Login />;
          }} />

          <Route exact path="/add-receipt" render={(props) => {
            return isAuthenticated ? <AddReceipt /> : <Login />;
          }} />

          <Route exact path="/edit-receipt/:receiptid" render={(props) => {
            return isAuthenticated ? <EditReceipt /> : <Login />;
          }} />
          
          <Route exact path='/Landing' render={(props)=>{
            return isAuthenticated ? <Landing /> : <Login />;
          }} />

          <Route exact path="/"  render={(props) => {
              return isAuthenticated ? <Home /> : <Login />;
          }} />
            
          <Route exact path='/login'>
            <Login></Login>
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>);
};

export default App;

身份验证后无法重定向 Ionic React 专用路由

Unable to redirect after authentication Ionic React private routes

reactjs

ionic-framework