用户未登录时重定向 [英] Redirect when the user is not logged in

问题描述

我在 App.js 中有以下路由

<div className="应用程序"><布局><路由精确路径=/"精确组件={Main}/><路由精确路径="/passwordchange/:email" component={PasswordChange}/><路由精确路径="/account" component={Account}/><路由精确路径="/forgot-password" component={ForgotPassword}/><路由精确路径="/login" component={Login}/><路由精确路径="/faq" component={FAQ}/><路由精确路径="/library" component={Library}/><路由精确路径="/signup" component={SignUp}/><路由精确路径="/signup/:id" component={SignUp}/><路由精确路径="/login/:id" component={Login}/><Route path="/books" 精确组件={BookSummaries}/><Route path="/home" 精确组件={Main}/><Route path="/pricing" 精确组件={Pricing}/><Route path="/books/:id" 精确组件={BookDetail}/><Route path="/categories/:id" 精确组件={Categories}/><Route path="/category/:category" 精确组件={BookListPage}/><Route path="/stacksocial" 精确组件={StackSocial}/><Route path="/booklist/:sort" 精确组件={BookListPage}/><Route path="/reader/:id" 精确组件={Reader}/><Route path="/search" 精确组件={BookSearch}/><Route path="/payment/:planid" 精确组件={Payment}/></布局>

</路由器>

对于某些路由，我只想在用户登录时才显示它们.使用 React 做到这一点的最佳方法是什么?

解决方案

最好的方法是创建一个 ProtectedRoute 组件.如果用户未登录，请将其重定向到其他位置，例如登录页面.

这里是 ProtectedRoute.js(这里我有一个 authService 来决定用户是否登录；你的可以不同).

从react"导入React；从react-router-dom"导入{路由，重定向}；从../../services/auth-service"导入authService；出口 const ProtectedRoute = ({小路，组件:组件，使成为，...休息}) =>{返回 (<路线路径={路径}{...休息}渲染={道具=>{如果(authService.isAuthenticated()){返回组件 ?<组件{...道具}/>:渲染(道具)；} 别的 {return <Redirect to="/login"/>;}}}/>);};导出默认的 ProtectedRoute；

这样您就可以将此组件用于需要身份验证的路由.

<路由器><div className="应用程序"><布局><路由精确路径=/"精确组件={Main}/><ProtectedRoute 精确路径="/passwordchange/:email" component={PasswordChange}/></布局>

I have the following routes in App.js

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <Route exact path="/passwordchange/:email" component={PasswordChange} />
      <Route exact path="/account" component={Account} />
      <Route exact path="/forgot-password" component={ForgotPassword} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/faq" component={FAQ} />
      <Route exact path="/library" component={Library} />
      <Route exact path="/signup" component={SignUp} />
      <Route exact path="/signup/:id" component={SignUp} />
      <Route exact path="/login/:id" component={Login} />
      <Route path="/books" exact component={BookSummaries} />
      <Route path="/home" exact component={Main} />
      <Route path="/pricing" exact component={Pricing} />
      <Route path="/books/:id" exact component={BookDetail} />
      <Route path="/categories/:id" exact component={Categories} />
      <Route path="/category/:category" exact component={BookListPage} />
      <Route path="/stacksocial" exact component={StackSocial} />
      <Route path="/booklist/:sort" exact component={BookListPage} />
      <Route path="/reader/:id" exact component={Reader} />
      <Route path="/search" exact component={BookSearch} />
      <Route path="/payment/:planid" exact component={Payment} />
    </Layout>
  </div>
</Router>

For some of the routes, I want to only show them if the user is logged in. What's the best way to do that using React?

解决方案

The best way to do it is by creating a ProtectedRoute component. If the user is not logged in, redirect them to somewhere else such as the login page.

Here is ProtectedRoute.js (here I have an authService to decide if the user is logged in or not; yours can be different).

import React from "react";
import { Route, Redirect } from "react-router-dom";
import authService from "../../services/auth-service";

export const ProtectedRoute = ({
  path,
  component: Component,
  render,
  ...rest
}) => {
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (authService.isAuthenticated()) {
          return Component ? <Component {...props} /> : render(props);
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

This way you can use this component for the routes that require authentication.

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
    </Layout>
  </div>

这篇关于用户未登录时重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！