决定谁进入管理面板，谁不进入 React Admin

编程问答 2022-04-30

问题描述

我正在制作一个 React 应用程序，它使用 Django Rest Framework 作为后端，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();
    },}

Admin.js

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

如果你需要别的东西，请告诉我，我已经尝试过 React Admin getPermissions、checkAuth，但我没有让它工作

更新：

我找到了解决方案，但如果您能帮我找到更好的解决方案，我将不胜感激。这是我的解决方案：

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,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，如果用户不在工作人员中，则进行重定向。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

djangodjangoreact-adminreactjsreactjsreactjsreactjs