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

Question

如果用户未登录，则尝试阻止他们访问我的/主页路由，并将他们重定向到登录。。。。目前正在使用passport和react路由器和组件。。。这是我的应用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;

这是我试图使工作的html-routes.js部分

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

Answer 1

如果您有一个端点来验证其身份验证状态，以及UI中存储的一些持久值(如isAuthenticated)，则可以设置某种身份验证门。

function AuthGate({ children ]} {

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

然后通过渲染您的受保护路线作为

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>
)
}

这将确保，只要您检查用户是否通过了身份验证，就可以呈现AuthGate的子级，否则将返回Login页面。一旦用户登录，只要没有重定向逻辑，他们就会已经在主页上，并根据需要查看内容。任何未封装在AuthGate中的路由都可以访问，无论身份验证状态如何。

Answer 2

您可以尝试

app.get('/mainpage'，passport.authenticate('local'，｛successRedirect:'/'，failureRedirect:'-/login'｝)；

Answer 3

1。声明私有路由并添加身份验证逻辑

// 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 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>
)