Question

我正在构建react + redux + reactRouter app。我有一个api，在登录后发送给我令牌，所以我可以保护我的api，但我有前端路由，应该受到保护（如仪表板）。

我有登录表单，可以发送登录操作。

.../actions/loginAction.js

axios.post('/api/auth', {
        email: email,
        password: password
    }).then(function (response) {
        dispatch({
            type: response.data.token ? types.LOGIN_SUCCESS : LOGIN_FAILED,
            email: email
        });
    }).catch(function (error) {
        dispatch({
            type: LOGIN_FAILED,
            error: error
        });
    });

和减速器

import * as types from '../actions/actionTypes';

let initialState = {
    email: '',
    isAuthenticated: false,
    authenticating: false,
    authError: false
};

export default (state = initialState, action) => {
    switch (action.type){
        case types.LOGIN_START:
            return Object.assign({}, state, {authenticating: true});
        case types.LOGIN_FAILED:
            return Object.assign({}, state, {authenticating: false, isAuthenticated: false, authError: action.error});
        case types.LOGIN_SUCCESS:
            return Object.assign({}, state, {
                authenticating: false,
                isAuthenticated: true,
                authError: false,
                email: action.email
            });
        default:
            return state;
    }
};

它工作，但是任何人都可以破解它，只是从控制台编辑redux store的值，或者调度LOGIN_SUCCESS操作，甚至编辑js在哪里验证，是不是？如何避免？

Answer 1

Dmitry的评论是正确的，但只是为了扩展它：每个非公开信息的请求都应该通过某种权限检查来涵盖，而你不能在客户端中做这些事情。进行LOGIN_SUCCESS操作是完全合理的，但其目的是通知UI的路由和方面。因此，您可以根据此类操作切换路由，但您应确保在必要时通过身份验证和授权覆盖与API交互的每个部分。

因此，例如，您的'假'用户在欺骗他们的登录后被路由到mysecretroute，但来自该路由的所有API交互都将失败，并且它们将再次被转储回登录屏幕。您当然不会完全依赖客户端状态值isAuthenticated来决定是否公开敏感数据。

如何保护react + redux + reactRouter app的客户端？

1 个答案: