Question

我想为我的反应应用程序使用基于角色的身份验证。我正在使用redux而且我在考虑可以在动作文件中检查角色（正如我所说我正在使用redux）。我的管理员有一个role_id属性，主要管理员为1，子管理员为2。我现在正在user.action.js的登录功能中检查这个，它不是我的仪表板，而是在我检查我的代码时给我success_login（enter image description here）（但我仍然在登录页面）。我在App.js中有2条路线：'/ home'和'/ homeAdmin'

我已经删除，更新并为主管理员创建管理组件，我不想将其显示给子管理员。

这样做的最佳方法是什么？在此先感谢您的帮助

这是我在user.action.js中的登录功能：

function login(email, password) {
return dispatch => {
    dispatch(request({ email }));

    userService.login(email, password)
        .then(
            user => { 
                dispatch(success(user));
                switch(user.role_id) {
                    case 1: return history.push('/home');
                    case 2: return history.push('/homeAdmin');
                    // default: return history.push('/home');
                }
                // history.push('/home');
            },
            error => { 
                dispatch(failure(error));
                dispatch(alertActions.error(error));
            }
        );
};

function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }

}

这是我用于路由的App.js：

<PrivateRoute exact path="/home" component={HomePage} /><PrivateRoute exact path="/homeAdmin" component={HomePageSubAdmin}/>

Answer 1

我认为你的方法是合法的。不要只为这个听取推荐传奇的人。

要将重定向目标与登录逻辑分开，可以将其放在动作创建者之外的简单映射中：

const routeForRole = {
    1: '/home',
    2: '/homeAdmin',
    default: '/home'.
};

然后推动更直接：

history.push(routeForRole[user.role_id] || routeForRole.default);

Answer 2

经过几次试验并最终失败后，我发现这些变化（在user.action.js中）对我有用，我很乐意听到您的想法，我想确保这是一个很好的方法

function login(email, password) {
return dispatch => {
    dispatch(request({ email }));

    userService.login(email, password)
        .then(
            user => { 
                dispatch(success(user));

                if ((JSON.stringify(user)).search('"role_id":1')>0) 
                    history.push('/home');
                if ((JSON.stringify(user)).search('"role_id":2')>0) 
                    history.push('/homeAdmin');

                // history.push('/home');
            },
            error => { 
                dispatch(failure(error));
                dispatch(alertActions.error(error));
            }
        );
};

function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }

}

Answer 3

如果你想与Redux设计保持一致，那么在Action中发送“成功”以传递角色id然后通过设置相应路由来修改状态属性将基于角色ID“home”或“homeAdmin”。

您可以拥有专用的身份验证组件，例如：

 <Route path="/auth" component={Authorize}/>

并且只做history.push到成功或失败状态设置的任何内容。

以下是更加复杂授权的非常好的文章：link

我可以在Redux的动作文件中使用switch case吗？

3 个答案: