我想在登錄后根據他們的角色重定向用戶并阻止他們在React.js中訪問此頁面

我已經使用 Redux 庫和 MongoDB 做到了這一點，它可以正常作業，但現在我用 mysql 做同樣的事情，所以它不能正常作業。此邏輯始終將所有用戶重定向到管理儀表板。我想這樣做，如果我這樣做 isAdmin="true" 它將重定向到管理儀表板并停止去協調儀表板。如果 isCoordinator="true" 則重定向到協調器儀表板并且無法訪問管理儀表板。我怎么能這樣？

*這是我的 Admin.js 檔案。我在哪里對私人訪問路徑做了邏輯。

import { useSelector } from "react-redux";
import { Route, Routes, Link, useNavigate } from "react-router-dom";
import UsersList from "./UsersList";
import UsersEntry from "./UsersEntry";
import Projects from "./projects/Projects";
import "./Admin.css"

export default function Admin() {
    let navigate = useNavigate();
const userState = useSelector(state=> state.loginUserReducer)
const {currentUser} =userState;
 useEffect(() => {
  // This code check Role of user who logged in and if not coordinator then restrict(stop) to going on this private page. By getItem and check === !currentUser.isCoordinator.
    if(localStorage.getItem('currentUser') === null || !currentUser.isAdmin){
       navigate('/coordinators');
       if(localStorage.getItem('currentUser') === null || !currentUser.isCoordinator){
        navigate('/');
     }
    }   
 }, []) 

*這是 UserAction.js 檔案。

export const loginUser = (user) => async (dispatch) => {
    dispatch({type: "USER_LOGIN_REQUEST"});
    try {
        const response = await axios.post("http://localhost:4000/login",user);
        console.log(response.data);
        dispatch({type:"USER_LOGIN_SUCCESS", payload: response.data});
        localStorage.setItem('currentUser',JSON.stringify(response.data));           
        window.location.href = "/admin"; 
        
    } catch (error) {
        dispatch({type: "USER_LOGIN_FAIL", payload: error})
    }
    }

*這是 UserReducer.js。

switch (action.type){
  case "USER_LOGIN_REQUEST":
      return{
          loading:true,
      };
  case "USER_LOGIN_SUCCESS":
      return{
          success: true,
          loading: false,
          currentusers: action.payload,
      };
  case "USER_LOGIN_FAIL":
      return{
          error: action.payload,
          loading:false,
      };
  default:
      return state; 
 }
};

*這是 Store.js。

import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import {loginUserReducer} from './UserReducer';

const currentUser = localStorage.getItem('currentUser') ? JSON.parse(localStorage.getItem('currentUser')) : null 

const rootReducer = combineReducers({loginUserReducer :  loginUserReducer});

const initialState = {
    loginUserReducer: {
        currentUser : currentUser
    }
} 
const middleware = [thunk]

const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
    );

    export default store;

uj5u.com熱心網友回復：

在依賴陣列中的 useEffect 中傳遞，currentUser所以只要它被更改，useEffect 就會被觸發。在當前情況下，當陣列為空時，它只會在第一次加載頁面時發生。

這是可能的嘗試：

 useEffect(() => {
  // This code check Role of user who logged in and if not coordinator then restrict(stop) to going on this private page. By getItem and check === !currentUser.isCoordinator.
    if(localStorage.getItem('currentUser') === null || !currentUser.isAdmin){
       navigate('/coordinators');
       if(localStorage.getItem('currentUser') === null || !currentUser.isCoordinator){
        navigate('/');
     }
    }   
 }, [currentUser]) <================

其次還要檢查您的嵌套 if 條件。您也可以使用 else if 以防它不是管理員，如果它是管理員，它將進入內部，如果它是管理員，那么它可以進入else if block. 但這完全取決于你，只是一個建議。

標籤：mysql 节点.js 反应 表示 还原

上一篇：在sequelize和mssql包中使用multiSubnetFailover

下一篇：為什么在索引檔案中以這種方式匯出？