如何限制用户访问特定组件答案

【问题标题】：How can I limit the user from going to specific component如何限制用户访问特定组件
【发布时间】：2022-01-03 17:23:40
【问题描述】：

我有 2 个问题。

1.) 如何将 localhost 默认设置为

http://localhost:3000/login

因为我的登录终点就是那个。

2.) 如果管理员没有正确登录，如何阻止他，我已经用这个完成了一小部分

<Route path="/home">{admin ? <Home /> : <Login />}</Route>

但是如果我有一堆组件呢？

import { useSelector } from 'react-redux'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import './App.css'
import Sidebar from './components/sidemenu/Sidebar'
import Home from './pages/home/Home'
import Login from './pages/login/Login'
import NewProduct from './pages/newProduct/NewProduct'
import NewUser from './pages/newUser/NewUser'
import ProductList from './pages/product/ProductList'
import Product from './pages/productItem/Product'
import User from './pages/user/User'
import UserList from './pages/userList/UserList'
function App() {
  const admin = useSelector((state) => state.user?.currentUser?.isAdmin)

  return (
    <Router>
      <Switch>
        <Route exact path="/login">
          <Login />
        </Route>
         {/* <Route path="/home">{admin ? <Home /> : <Login />}</Route> */}
        {admin && (
          <>
            <div className="container">
              <Sidebar />
              <Route path="/">
                <Home />
              </Route>
              <Route path="/users">
                <UserList />
              </Route>
              <Route path="/user/:userId">
                <User />
              </Route>
              <Route path="/newUser">
                <NewUser />
              </Route>
              <Route path="/products">
                <ProductList />
              </Route>
              <Route path="/products/:productId">
                <Product />
              </Route>
              <Route path="/newproduct">
                <NewProduct />
              </Route>
            </div>
          </>
        )}
      </Switch>
    </Router>
  )
}

export default App

我试过了

{admin && (<> 
     ......
 </>)}

但是当我在浏览器中编写端点时，它仍然允许我进入

【问题讨论】：

标签： javascript reactjs authentication react-router mern

【解决方案1】：

创建一个组件来检查用户是否有权限，

喜欢这个：

import React from "react";
import {Route, Redirect} from "react-router-dom";

export default function PrivateRoute({component: Component, auth, ...rest}) {
    return (
        <Route {...rest} render={(props) => (
            auth? (
                <Component {...props}/>
            ) : (
                <Redirect to="/login"/>
            )
        )}
        />
    )
}

你可以这样使用它：

...
<Switch>
    <Route exact path="/" component={Login} />
    <Route exact path="/login" component={Login} />
    <PrivateRoute path="/dashboard" auth={admin} component={Dashboard}/>
</Switch>
...

【讨论】：