您如何重定向未使用护照身份验证登录的用户

Question

trying to stop a user from accessing my /mainpage route if they arent logged and to redirect them to login.... currently using passport and react router and components... here is my app js

    return (
      <Router>
      <div>
          <Route exact path="/" component={Login} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={Signup} />
          <Route exact path="/mainpage" component={MainPage} />
          <Footer />
      </div>
    </Router>
    );
  }
export default App;

this is the html-routes.js part im trying to make work

app.get("/mainpage", isAuthenticated, (req, res) => {
    res.sendFile(path.join(__dirname, "/signup.html"));
  });

Answer 1

If you had an endpoint to validate their authentication status, as well as some persisted value (such as isAuthenticated ) stored in the UI you can set up an auth gate of sorts.

function AuthGate({ children ]} {
   
   return(
       <>
           {isAuthenticated && validationCheck() ? children : <Login />}
       </>
   )
}

and then pass render your protected routes as such

function App() {
    return(
        <Router>
             <div>
                 <Route exact path="/" component={Login} />
                 <Route exact path="/login" component={Login} />
                 <Route exact path="/signup" component={Signup} />
                 <AuthGate>
                     <Route exact path="/mainpage" component={MainPage} />
                 </AuthGate>
                 <Footer />
        </Router>
    )
}

this would ensure that as long as your checks to see if a user was authenticated were true, you would render the children of the AuthGate, otherwise return the Login page. Once a user logs in, as long as there is no redirect logic, they will already be on the Mainpage route and view the content as desired. Any routes not wrapped in the AuthGate would be accessible regardless of authentication status.

Answer 2

You can try

app.get('/mainpage', passport.authenticate('local', { successRedirect: '/', failureRedirect: '/login' }));

Answer 3

1. declare Private Route and add auth logic

 // declare Private Route type PrivateRouteProps = { children: React.ReactNode path: string exact?: boolean rest?: never } const PrivateRoute: React.FC<PrivateRouteProps> = ( { children, path, exact, ...rest }: PrivateRouteProps) => { const store = useGlobalStore() const loggedIn = store.loggedIn console.log(store.loggedIn, '??') return ( <Route path={path} exact={exact} {...rest} render={(props) => loggedIn? ( children ): ( <Redirect to={{ pathname: '/login', // eslint-disable-next-line react/prop-types state: { from: props.location }, }} /> ) } /> ) }

2. use Private Router

 // use Router const Router: React.FC = () => ( <BrowserRouter> <Suspense fallback={<PageLoading />}> <Switch> <PrivateRoute path="/" exact> <Redirect to={'/welcome'} /> </PrivateRoute> <Route path="/login" exact> <Login /> </Route> <Route path="/403" exact> <Error403 /> </Route> <Route path="/404" exact> <Error404 /> </Route> <Route path="/500" exact> <Error500 /> </Route> <PrivateRoute path="*"> <LayoutRoutes /> </PrivateRoute> </Switch> </Suspense> </BrowserRouter> )