Question

我已经阅读了互联网上几乎所有的文档或权限。我没有开始一个新项目。我已经有了项目设置。这是我现在的登录方法：

function getRoutes(store) {

    function hasAuth(nextState, replace, callback){
        const state = store.getState();
        const valid = !!state.tokenReducer.token;

        debug('AUTH: ', valid)

        if (valid){
            console.log("I am inside client routes line 44")
            debug('AUTH: Bailing. Already Valid.')
            return callback()
        }
        replace('/login')
        debug('AUTH: To Login')
        callback();
    }

    return (
        <Route path='/' component={App}>
            <Route path='/login' component={LoginPage}/>
            {/*<Route path='/login' component={LoginPage}/>*/}
            <Route path="/app" onEnter={hasAuth}>

登录组件

class LoginPage extends Component {

    static contextTypes = {
        router: PropTypes.object.isRequired
    }

    toApp() {
        console.log("login ajax called")
        //event.preventDefault();
        var that = this;
        let token;
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://www.xxxx.xxxxx.xxxxx.com/auth/login/",
            "method": "POST",
            "credentials": 'include',
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
            },
            "data": {
                "password": document.getElementById("password").value,
                "username": document.getElementById("username").value
            },
            success: (response, textStatus, jQxhr) => {

                this.props.tokenAction(response.auth_token, "apurv");


            }
        }


        $.ajax(settings).done((response) => {

            token = response.auth_token
            window.localStorage.token_auth = token;
            this.context.router.push('/app')
        });

现在我正在尝试开始使用aor-permissions。它要求做的第一件事是这样的

// in authClient.js
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_CHECK, AUTH_ERROR } from 'admin-on-rest';
import { AUTH_GET_PERMISSIONS } from 'aor-permissions';
import { decode } from 'jsonwebtoken';

export default (type, params) => {
    // to login, fetch token and role from auth server, and store them in local storage
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request('https://example.com/authenticate', {
            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 }) => {
                const decoded = decode(token);
                localStorage.setItem('token', token);
                localStorage.setItem('role', decoded.role);
            });
    }
    // ... usual authClient code

    // now simply read permissions from local storage
    if (type === AUTH_GET_PERMISSIONS) {
        return Promise.resolve(localStorage.getItem('role'));
    }
};

我没有任何authClient.js。如何用aor缝合当前结构并开始使用它。第一步对我来说一点也不清楚。

Answer 1

使用authclient是完全可选的，如果你想为许多已经在管理中构建的东西（如身份验证和登录挂钩）编写自己的逻辑。

但是，如果你想使用aor-permissions，我认为你必须通过authclient。

此外，您正在单独创建/登录路由，因此，如果您使用的是Admin组件，我假设您不知道您已在Admin组件中构建了/ login路由。您只需更改Admin组件的loginPage prop即可自定义登录视图。

默认情况下，admin-on-rest应用程序不需要身份验证。但如果REST API返回401（未授权）或403（禁止）响应，然后用户被重定向到/ login路由。你有无所事事 - 它已经内置。

以上引用的来源是@ Authentication。

如果您根本不使用Admin组件，那么您必须编写自己的登录和身份验证系统。有关详情，请访问 - 使用admin-on-rest制作custom app。

如果您已经编写了应用程序并希望集成aor-permissions，那么您可能希望查看aor-permissions的文档。在api部分，您可能会发现有趣的组件，如SwitchPermissions，WithPermission等，它们可能对您有所帮助，其中authClient函数传递给这些组件而不是Admin组件。

希望它有所帮助。

开始使用aor-permissions（admin-on-rest权限）

1 个答案: