首页 文章

如何保护客户端反应redux reactRouter app？

提问于
浏览 次
1

我正在构建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;
    }
};

It WORKS, BUT anyone can hack it, just editing value of redux store from console, or dispatching LOGIN_SUCCESS action, or even editing js where is verification, is it right? How to avoid it?

javascript reactjs security redux frontend

1 回答

  • 1

    Dmitry 's comment is correct, but just to expand on it: every request for non-public information should be covered by some kind of permission check, and you can' t在客户端做那些事情 . 有一个 LOGIN_SUCCESS 动作是完全合理的，但它的目的是告知UI的路由和方面 . 因此，您可以根据此类操作切换路由，但应确保在必要时通过身份验证和授权覆盖与API交互的每个部分 .

    因此，例如，您的'fake'用户在欺骗他们的登录后被路由到 mysecretroute ，但来自该路由的所有API交互都将失败，并且他们只依赖于您的客户端状态值 isAuthenticated 来决定是否公开敏感数据 .

    回复于

相关问题