IT技术 - 使用react-hooks，用户如何根据管理员访问导航到受保护的路由 - 吾爱随笔录

使用react-hooks，用户如何根据管理员访问导航到受保护的路由

IT技术 reactjs react-hooks react-router-dom

2022-07-07 01:55:56

在用户登录时使用protected.route我们如何让用户导航到像Dashboard和这样的私人路线ViewDetails？如果他是管理员用户，则显示 Dashboard，否则显示 ViewDetails 屏幕。有人可以就此提出建议。我添加了一个codesandbox链接以供参考
Codesandbox链接

https://codesandbox.io/s/tender-cerf-kss82?file=/src/components/Login.js

login.js

import { useState } from "react";
import { useHistory } from "react-router-dom";

const loginData = [
  { id: 1, email: "mat@test.com", password: "admin123", access: "admin" },
  { id: 1, email: "duo@test.com", password: "test123", access: "user" }
];
const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const history = useHistory();

  const onSubmit = (email, password) => {
    if (
      email === loginData[0].email &&
      password === loginData[0].password &&
      loginData[0].access === "admin"
    ) {
      history.push("/");
    } else {
      history.push("/ViewDetails");
    }
  };

  return (
    <div>
      Login Page <br></br>
      <input
        type="text"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="text"
        name="password"
        onChange={(e) => setPassword(e.target.value)}
      />
      <input type="button" value="submit" onClick={onSubmit(email, password)} />
    </div>
  );
};
export default Login;

protected.route.js

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

export const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (localStorage.getItem("loginEmail")) {
          return <Component {...props} />;
        } else {
          return (
            <>
              <Redirect
                to={{
                  pathname: "/login",
                  state: {
                    from: props.location
                  }
                }}
              />
            </>
          );
        }
      }}
    />
  );
};

App.js

import React, { useState } from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Dashboard from "./components/Dashboard.js";
import Login from "./components/Login.js";
import ViewDetails from "./components/ViewDetails.js";
import UserLoginProvider from "./components/UserLoginProvider.js";
import UserProfileProvider from "./components/UserProfileProvider.js";
import ProtectedRoute from "./components/protected.route.js";
import ReactDOM from "react-dom";
//var ReactDOM = require("react-dom");

const App = () => {
  return (
    <BrowserRouter>
      <UserLoginProvider>
        <UserProfileProvider>
          <>
            <Switch>
              <ProtectedRoute exact path="/" component={Dashboard} />
              <ProtectedRoute path="/ViewDetails" component={ViewDetails} />
              <Route path="/Login" component={Login} />
            </Switch>
          </>
        </UserProfileProvider>
      </UserLoginProvider>
    </BrowserRouter>
  );
};
ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("root")
);

export default App;

1个回答

这是一个示例建议。

更新ProtectedRoute组件以获取访问roleprops并有条件地呈现Route或Redirect基于任何role存储在 localStorage 中。如果角色匹配，则返回预期的路由，如果存在但不匹配，则重定向 home，否则重定向到登录。

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

export const ProtectedRoute = ({ role, ...rest }) => {
  const currentRole = JSON.parse(localStorage.getItem("role"));
  if (currentRole === role) {
    return <Route {...rest} />;
  } else {
    return (
      <Redirect
        to={{
          pathname: currentRole ? "/" : "/login",
          state: {
            from: rest.location
          }
        }}
      />
    );
  }
};

更新Login以处理将经过身份验证的用户的access角色保存到本地存储并重定向回他们最初尝试访问的路径。

import { useHistory, useLocation } from "react-router-dom";

const Login = () => {
  const history = useHistory();
  const { state } = useLocation();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = (email, password) => {
    const user = loginData.find(
      (el) => el.email === email && el.password === password
    );

    if (user) {
      localStorage.setItem("role", JSON.stringify(user.access));
      history.replace(state.from ?? "/");
    } else {
      console.error("no user match found!");
    }
  };

  return (
    <div>
      ....
    </div>
  );
};

更新您在App.

const App = () => {
  return (
    <UserLoginProvider>
      <UserProfileProvider>
        <Switch>
          <ProtectedRoute
            role="admin"
            path="/dashboard"
            component={Dashboard}
          />
          <ProtectedRoute
            role="user"
            path="/viewDetails"
            component={ViewDetails}
          />
          <Route path="/Login" component={Login} />
          <Route>
            .... home page with nav links, etc...
          </Route>
        </Switch>
      </UserProfileProvider>
    </UserLoginProvider>
  );
};

其它你可能感兴趣的问题

上一篇MapDispatchToProps 在返回对象时不起作用下一篇无法在react应用程序中集成 react-paypal-button-v2