reactjs - 多用户登录认证| react 还原

Question

我有一个具有多用户登录功能的应用程序。现在，我为登录功能创建了 redux 存储。如果用户登录，根据其类型，它将重定向到特定的仪表板。如果学生用户登录，他应该只能访问学生仪表板，他不应该能够访问其他仪表板。这同样适用于其他人。但是，现在，如果任何用户登录，他们就可以访问其他用户的仪表板。我怎样才能阻止他们只使用他们的仪表板。

使用正确的代码更新

/***AppRouter***/
    import React, {Component} from 'react';
    import { BrowserRouter, Route, Switch } from 'react-router-dom';
    import StuDashboard from '../views/ed/dashboard/Dashboard.js';
    import AdminDashboard from '../views/biz/dashboard/Dashboard.js';
    import OrgDashboard from '../views/org/dashboard/Dashboard.js';
    import SupAdDashboard from '../views/me/dashboard/Dashboard.js';
    import UserLogin from '../views/loginUser/Login.js';
    import history from '../history/history.js';
    import { PrivateRoute } from './PrivateRoute.js';
    import NotFoundPage from '../views/NotFoundPage.js';
    import Authorization from './Authorization';



    class AppRouter extends Component {
      render () {
        return(

          <BrowserRouter history={history}>
            <Switch>
              <Route path="/" component={Landing} exact />
              <Route path="/confirmation" component={EmailCon}/>
              <PrivateRoute path="/student/dashboard" component={Authorization(StuDashboard),["Student"]}/>
              <PrivateRoute path="/admin/dashboard" component={Authorization(AdminDashboard),["Admin"}/>
              <PrivateRoute path="/org/dashboard" component={Authorization(OrgDashboard),["Org"]}/>
              <PrivateRoute path="/SuperAdmin/dashboard" component={Authorization(SupAdDashboard),["SuperAdmin"]}/>
              <Route path="/login" component={UserLogin}/>  
              <Route path="" component={NotFoundPage} />
            </Switch>
          </BrowserRouter>

        );
      }
    }

    export default AppRouter;

/***PrivateRoute***/
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('token')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

/***Authorization***/
    import React, { Component } from 'react';
import { connect } from "react-redux";

const Authorization = (WrappedComponent, allowedRoles) =>{
   class WithAuthorization extends Component {
       render() {

     const userType = this.props.user
      if (allowedRoles.includes(userType)) {
        return <WrappedComponent {...this.props} />
      } else {
        return <h1>You are not allowed to view this page!</h1>
      }
    }
  }
const mapStateToProps = state => ({ user: state.login.userName, userType: state.login.userType })
return connect(mapStateToProps)(WithAuthorization);
}
export  default  Authorization;

/***Action.js***/
import axios from "axios";
import { LOGIN_PENDING, LOGIN_COMPLETED, LOGIN_ERROR, LOGOUT } from "./types";
import ApiUrl from "../../constants/ApiUrl.js";
import qs from "qs";
import history from '../../history/history.js';


const startLogin = () => {
  return {
    type: LOGIN_PENDING
  };
};

const loginComplete = data => ({
  type: LOGIN_COMPLETED,
  data
});

const loginError = err => ({
  type: LOGIN_ERROR,  
  err
});

export const loginUser = (email, password) => {
  return dispatch => {
    dispatch(startLogin());

    let headers = {
      "Content-Type": "application/x-www-form-urlencoded"
    };

    const data = qs.stringify({
      grant_type: "password",
      username: email,
      password: password,
    });

    axios
      .post(`${ApiUrl}/Token`, data, {
        headers: headers
      })

      .then(function (resp) {

        dispatch(loginComplete(resp.data));


       localStorage.setItem("token", resp.data.access_token);
      switch (resp.data.userType) {
        case 'Admin': {
          history.push('/admin/dashboard');
          break;
        }
        case 'Student': {
          history.push('/student/dashboard');
          break;
        }
        case 'Organization': {
          history.push('/org/dashboard');
          break;
        }
        case 'SuperAdmin': {
          history.push('/SuperAdmin/dashboard');
          break;
        }
        default:
         history.push('/');
      }
      window.location.reload();
      return;


})
      .catch(err => dispatch(loginError(err)));
  };
};

export const logOut = () => {
  localStorage.clear();
  return {
    type: LOGOUT,
  };
}

Answer 1

我添加了一个Authorization HOC来满足访问控制的需要。因此，您只需将组件和允许的角色传递给授权 HOC。首先，我假设您的用户有一个属性 userType。看看这个URL 。

  /***Authorization***/
import React, { Component } from "react";
import { connect } from "react-redux";

const Authorization = (WrappedComponent, allowedRoles) => {
  class WithAuthorization extends Component {
    render() {
      const userType  = this.props.userType;
      if (allowedRoles.includes(userType)) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <h1>You are not allowed to view this page!</h1>;
      }
    }
  }
  const mapStateToProps = state => ({ user: state.login.userName, userType: state.login.userType })
  return connect(mapStateToProps)(WithAuthorization);
};
export default Authorization;

<小时/>

你的路由器将看起来像这样

      <BrowserRouter history={history}>
        <Switch>
          <Route path="/" component={Landing} exact />
          <Route path="/confirmation" component={EmailCon}/>
          <PrivateRoute path="/student/dashboard" component={Authorization(StuDashboard,["Student"])}/>
          <PrivateRoute path="/admin/dashboard" component={Authorization(AdminDashboard,["Admin"])}/>
          <PrivateRoute path="/org/dashboard" component={ Authorization(OrgDashboard,["Organization"])}/>
          <PrivateRoute path="/SuperAdmin/dashboard" component={Authorization(SupAdDashboard,["SuperAdmin"])}/>
          <Route path="/login" component={UserLogin}/>  
          <Route path="" component={NotFoundPage} />
        </Switch>
      </BrowserRouter>