我可以在 Redux 中使用操作文件中的切换大小写吗?

Question

我想对我的反应应用程序使用基于角色的身份验证。我正在使用 redux，我想我可以检查操作文件中的角色(正如我所说我正在使用 redux(。我的管理员有一个role_id属性，主管理员为 1，副管理员为 2。我正在user.action的登录功能中检查它.js现在，它不会进入我的仪表板，而是在我检查代码时给我success_login(在此处输入图像描述((但我仍然留在登录页面(。我在应用程序中有 2 条路由.js："/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 } }

}

这是我在应用程序中.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 设计保持一致，那么在调度"成功"的操作中传递角色 ID 会很好，然后 Reducer 通过设置相应的路由来修改状态属性基于角色 ID "home"或"homeAdmin"。

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

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

而这只是做历史，推动任何设定在成功或失败的状态。

这是一篇非常好的文章，可以遵循更复杂的授权：链接