使用Reaction挂钩，用户如何根据管理员访问权限导航到受保护的路径 [英] Using react hooks how can a user navigates to protected routes based on admin access

问题描述

使用protected.route当用户登录时，我们如何让用户导航到Dashboard和ViewDetails这样的私有路径？如果他是管理员用户，则显示仪表板，否则显示查看详细信息屏幕。有人能在这方面给点建议吗。我已经添加了一个代码框链接以供参考
代码框链接

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: "[e-mail]", password: "admin123", access: "admin" },
  { id: 1, email: "[e-mail]", 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;

推荐答案

这里有一个示例建议。

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

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

这篇关于使用Reaction挂钩，用户如何根据管理员访问权限导航到受保护的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！