代码之家 › 专栏 › 技术社区 › Nafis

我可以在Redux中的操作文件中使用switch case吗?

redux authentication reactjs

Nafis · 技术社区 · 8 年前

我想对我的react应用程序使用基于角色的身份验证。我正在使用redux,我想我可以检查动作文件中的角色(正如我说的,我正在使用redux)。我的管理员有一个role\u id属性,主管理员为1,副管理员为2。我正在用户中的登录功能中检查此项。行动js现在,它不会进入我的仪表板,而是让我成功登录( enter image description here )当我检查代码时(但我仍然停留在登录页面)。我有2条路线在应用程序中。js:“/home”和“/homeAdmin”

我有删除,更新和创建管理组件的主要管理员,我不想显示这些子管理员。

最好的方法是什么? 提前感谢您的帮助

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 } }

}

这是我的应用程序内。用于路由的js:

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

3 回复 | 直到 8 年前

timotgl 8 年前

我认为你的做法是合理的。不要听人们推荐传奇只是为了这 .

要将重定向目标与登录逻辑分离,可以将其放置在操作创建者外部的简单映射中:

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

那么推动就更直接了:

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

Nafis 8 年前

经过几次尝试,最终失败了,我发现这些更改(在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 } }

}

-1

Community Mohan Dere 6 年前

如果您希望与Redux设计保持一致,那么在调度“success”时,最好传递角色id,然后Reducer根据角色id设置相应的路由“home”或“homeAdmin”,从而修改state属性。

您可以使用专用的身份验证组件,例如:

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

这就是历史。在成功或失败的时候,推动到任何设定的状态。

下面是一篇非常好的文章,可以获得更复杂的授权: link