来自React App的API用户身份验证 [英] User Authentication for API from React App

问题描述

我有一个用Nodal构建的简单API，它允许用户创建一个新工作（本质上是服务业务的工作订单）。 API正在使用OAuth，因此为了创建新作业，用户必须首先通过用户名和密码进行身份验证来获取令牌。

I have a simple API built in Nodal which allows a user to create a new job (essentially a work order for a service business). The API is using OAuth, so in order to create a new job, the user has to first obtain a token by authenticating via username and password.

前端将进入在React中构建。为了访问该站点，用户必须使用他们的用户名和密码登录，此时他们将获得一个令牌来进行API调用。两个问题：

The frontend is going to be built in React. In order to access the site, the user will have to log in with their username and password, at which point they'll be given a token to make API calls. Two questions:

1）如何安全地存储API令牌，以便用户每次刷新页面时都不必登录？

1) How do I securely store the API token such that the user doesn't have to log in every time the page refreshes?

2）如何使用相同的登录步骤来确定他们是否可以访问前端应用程序中的任何给定页面？

2) How do I use this same login step to determine if they have access to any given page within the frontend app?

推荐答案

这是我在当前项目中使用的过程。当用户登录时，我将获取令牌并存储在localStorage中。然后，每当用户前往任何路线时，我都会将该路线所服务的组件包裹起来。以下是检查令牌的HOC代码。

This is the process I have used in my current project. When a user logs in, I take the token and store in localStorage. Then every time a user goes to any route, I wrap the component that the route serves in a hoc. Here is the code for the HOC that checks for token.

export function requireAuthentication(Component) {

    class AuthenticatedComponent extends React.Component {

        componentWillMount () {
            this.checkAuth(this.props.user.isAuthenticated);
        }

        componentWillReceiveProps (nextProps) {
            this.checkAuth(nextProps.user.isAuthenticated);
        }

        checkAuth (isAuthenticated) {
            if (!isAuthenticated) {
                let redirectAfterLogin = this.props.location.pathname;
                browserHistory.push(`/login?next=${redirectAfterLogin}`);
            }
        }

        render () {
            return (
                <div>
                    {this.props.user.isAuthenticated === true
                        ? <Component {...this.props}/>
                        : null
                    }
                </div>
            )

        }
    }

    const mapStateToProps = (state) => ({
        user: state.user
    });

    return connect(mapStateToProps)(AuthenticatedComponent);
}

然后在我的index.js中，我用这个HOC包装每个受保护的路由，如此：

Then in my index.js I wrap each protected route with this HOC like so:

<Route path='/protected' component={requireAuthentication(ProtectedComponent)} />

这是用户减速器的外观。

This is how the user reducer looks.

export default function userReducer(state = {}, action) {
    switch(action.type) {
        case types.USER_LOGIN_SUCCESS:
            return {...action.user, isAuthenticated: true};
        default:
            return state;
    }
}

action.user包含令牌。用户首次登录时，令牌可以来自api，如果此用户已经是登录用户，则可以来自localstorage。

action.user contains the token. The token can either come from the api when a user first logs in, or from localstorage if this user is already a logged in user.

这篇关于来自React App的API用户身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！