aor权限入门(admin-on-rest权限)

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是完全可选的，如果你想为许多已经内置的管理-on-rest编写自己的逻辑，比如身份验证和登录挂钩。

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

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

默认情况下，admin-on-rest应用程序不需要身份验证。但是，如果REST API返回401 (未经授权)或403 (禁止)响应，则用户将被重定向到/login路由。你什么也不用做-它已经内置了。

以上引用的来源是@ Authentication。

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

如果你已经编写了应用程序，并且想要集成aor权限，你可能会想要浏览一下aor-permissions的文档。在api部分，你可能会发现一些有趣的组件，比如SwitchPermissions、WithPermission等，它们可能会对你有所帮助，其中authClient函数被传递给这些组件，而不是在管理组件中。

希望能有所帮助。