javascript - 如何保护 react + redux + reactRouter 应用程序的客户端？

Question

我正在构建 React + redux + reactRouter 应用程序。我有一个 api，它在登录后向我发送 token ，因此我可以保护我的 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
        });
    });

和 reducer

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 存储的值，或分派(dispatch) LOGIN_SUCCESS 操作，甚至编辑验证所在的 js，对吗？如何避免？

Answer 1

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

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