admin-on-rest中如何为authClient传递自定义参数？

我刚好之前也碰到过这个问题，官方示例里的authClient确实是把API地址硬写在文件里的，但其实只要把authClient改成一个工厂函数，就能轻松实现从外部传入自定义API地址的需求。

具体做法很简单，分两步来：

1. 改造authClient为工厂函数 #

把你的authClient.js改成一个接收apiUrl参数的函数，函数内部返回原本的authClient对象，这样在各个方法里就能直接使用传入的API地址了：

// authClient.js
export default (apiUrl) => ({
    login: ({ username, password }) => {
        // 这里直接使用传入的apiUrl拼接登录接口
        const request = new Request(`${apiUrl}/login`, {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({ token }) => {
                localStorage.setItem('token', token);
            });
    },
    logout: () => {
        localStorage.removeItem('token');
        return Promise.resolve();
    },
    checkAuth: () => {
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject();
    },
    checkError: (error) => {
        const status = error.status;
        if (status === 401 || status === 403) {
            localStorage.removeItem('token');
            return Promise.reject();
        }
        return Promise.resolve();
    },
    getPermissions: () => {
        // 根据你的业务需求实现权限逻辑，这里示例返回空数组
        return Promise.resolve([]);
    }
});

2. 在App.js中传入API地址 #

现在你就可以在App.js里定义好API地址，然后调用这个工厂函数把地址传进去，再传给Admin组件的authClient属性：

// App.js
import authClient from './authClient';

// 定义你的API基础地址
const api = 'http://10.1.16.138:8343/rest';

const App = () => (
    <Admin 
        authClient={authClient(api)} 
        dataProvider={/* 这里传入你的dataProvider */}
    >
        {/* 这里添加你的资源配置 */}
    </Admin>
);

export default App;

这样改造后，authClient里的所有方法都能使用你传入的自定义API地址了，完美解决了官方示例硬编码地址的局限，也满足了动态传递参数的需求。

内容的提问来源于stack exchange，提问作者blueheart_2