Reactjs 决定谁进入管理面板，谁不参与管理

我正在制作一个react应用程序，它使用Django Rest框架作为后端，react作为前端，我还使用react Admin，来创建管理面板的所有逻辑，问题是，我希望当有人登录到网站时，如果Django用户模型的“is_staff”字段是真的，网站允许你进入，如果不是真的，然后将您重定向到主页（会话处于活动状态）。我将添加一些代码，帮助您理解我做错了什么。提前谢谢

TokenAuthProvider.js

import { tokenAuthProvider } from 'ra-data-django-rest-framework'
import apiUrl from './apiUrl'

const authProvider = tokenAuthProvider({obtainAuthTokenUrl : apiUrl + '/api-token-auth/'})

export const modifiedAuthProvider = {
    ...authProvider,
    login : async ({ username, password }) => {
        const request = new Request(apiUrl + '/api-token-auth/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        const response = await fetch(request);
        if (response.ok) {
            const data = await response.json()
            localStorage.setItem('token', data.token);
            localStorage.setItem('is_staff', data.is_staff);
            return;
        }
        if (response.headers.get('content-type') !== 'application/json') {
            throw new Error(response.statusText);
        }
        const json = await response.json();
        const error = json.non_field_errors;
        throw new Error(error || response.statusText);
    },
    logout: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('is_staff');
        return Promise.resolve();
    },
}

import React from 'react'
import { Admin, Resource, ListGuesser, usePermissions } from 'react-admin'
import drfProvider, { fetchJsonWithAuthToken } from 'ra-data-django-rest-framework'
import { modifiedAuthProvider as authProvider } from './Providers/TokenAuthProvider'
import apiUrl from './Providers/apiUrl'
import { Redirect } from 'react-router-dom'
import { createBrowserHistory as createHistory } from 'history'

const history = createHistory()

const dataProvider = drfProvider(apiUrl, fetchJsonWithAuthToken)

const AdminApp = () => {
    return (
        <Admin history={history} authProvider={authProvider} dataProvider={dataProvider}>
            <Resource name="max-amount" list={ListGuesser} />
            <Resource name="motorcyclers" list={ListGuesser} />
        </Admin>
            
    )
}

export default AdminApp

import { tokenAuthProvider } from 'ra-data-django-rest-framework'
import apiUrl from './apiUrl'

const authProvider = tokenAuthProvider({obtainAuthTokenUrl : apiUrl + '/api-token-auth/'})

export const modifiedAuthProvider = {
    ...authProvider,
    login : async ({ username, password }) => {
        const request = new Request(apiUrl + '/api-token-auth/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        const response = await fetch(request);
        if (response.ok) {
            const data = await response.json()
            localStorage.setItem('token', data.token);
            localStorage.setItem('is_staff', data.is_staff);
            return;
        }
        if (response.headers.get('content-type') !== 'application/json') {
            throw new Error(response.statusText);
        }
        const json = await response.json();
        const error = json.non_field_errors;
        throw new Error(error || response.statusText);
    },
    logout: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('is_staff');
        return Promise.resolve();
    },
    checkAuth: () => {
        const token = localStorage.getItem('token')
        const isStaff = localStorage.getItem('is_staff')
        const isStaffValidation = isStaff && isStaff !== "false" ? true : false
        console.log(token)
        console.log(isStaffValidation)
        if (token) {
            if (isStaffValidation) {
                return Promise.resolve()
            }
            window.location.href = "http://localhost:3000"
            return Promise.resolve("/schedule")
        }
        return Promise.reject()
    }
}

Admin.js

import { tokenAuthProvider } from 'ra-data-django-rest-framework'
import apiUrl from './apiUrl'

const authProvider = tokenAuthProvider({obtainAuthTokenUrl : apiUrl + '/api-token-auth/'})

export const modifiedAuthProvider = {
    ...authProvider,
    login : async ({ username, password }) => {
        const request = new Request(apiUrl + '/api-token-auth/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        const response = await fetch(request);
        if (response.ok) {
            const data = await response.json()
            localStorage.setItem('token', data.token);
            localStorage.setItem('is_staff', data.is_staff);
            return;
        }
        if (response.headers.get('content-type') !== 'application/json') {
            throw new Error(response.statusText);
        }
        const json = await response.json();
        const error = json.non_field_errors;
        throw new Error(error || response.statusText);
    },
    logout: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('is_staff');
        return Promise.resolve();
    },
}

import React from 'react'
import { Admin, Resource, ListGuesser, usePermissions } from 'react-admin'
import drfProvider, { fetchJsonWithAuthToken } from 'ra-data-django-rest-framework'
import { modifiedAuthProvider as authProvider } from './Providers/TokenAuthProvider'
import apiUrl from './Providers/apiUrl'
import { Redirect } from 'react-router-dom'
import { createBrowserHistory as createHistory } from 'history'

const history = createHistory()

const dataProvider = drfProvider(apiUrl, fetchJsonWithAuthToken)

const AdminApp = () => {
    return (
        <Admin history={history} authProvider={authProvider} dataProvider={dataProvider}>
            <Resource name="max-amount" list={ListGuesser} />
            <Resource name="motorcyclers" list={ListGuesser} />
        </Admin>
            
    )
}

export default AdminApp

import { tokenAuthProvider } from 'ra-data-django-rest-framework'
import apiUrl from './apiUrl'

const authProvider = tokenAuthProvider({obtainAuthTokenUrl : apiUrl + '/api-token-auth/'})

export const modifiedAuthProvider = {
    ...authProvider,
    login : async ({ username, password }) => {
        const request = new Request(apiUrl + '/api-token-auth/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        const response = await fetch(request);
        if (response.ok) {
            const data = await response.json()
            localStorage.setItem('token', data.token);
            localStorage.setItem('is_staff', data.is_staff);
            return;
        }
        if (response.headers.get('content-type') !== 'application/json') {
            throw new Error(response.statusText);
        }
        const json = await response.json();
        const error = json.non_field_errors;
        throw new Error(error || response.statusText);
    },
    logout: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('is_staff');
        return Promise.resolve();
    },
    checkAuth: () => {
        const token = localStorage.getItem('token')
        const isStaff = localStorage.getItem('is_staff')
        const isStaffValidation = isStaff && isStaff !== "false" ? true : false
        console.log(token)
        console.log(isStaffValidation)
        if (token) {
            if (isStaffValidation) {
                return Promise.resolve()
            }
            window.location.href = "http://localhost:3000"
            return Promise.resolve("/schedule")
        }
        return Promise.reject()
    }
}

我所做的唯一更改是checkAuth函数，它使用window.location.href在用户不在工作人员中时重定向