Question

我有一个与数据库通信的前端应用程序。通过前端，您可以修改数据库，因此我需要授权用户。

我通过谷歌设置身份验证进入应用程序，但我还想检查用户是否已登录并在每次涉及数据库的操作之前获得授权。

然而，我不知道什么是最好的方法。我的伪代码就像：

handleSubmit = () =>{
    this.props.checkUser();
    this.props.dbAction();
}

然而，显然在checkUser解析之前，dbAction将会触发。 Settimeout似乎也没有做到这一点。那我该怎么解决呢？

我在后端使用React和Redux，在后端使用node.js + passport + mongoDB。

如果社区发现我现在太模糊了，我可以提供一些围绕这个问题的代码。

Answer 1

您应该使用callbacks 所以你的代码应该是这样的：

checkIfUserIsAuthorized((response) => {
    if(response === 'authorized') {
        db.actions();
    } else {
        alert("You are unauthorized dude");
    }
});

Answer 2

您可以创建一个中间件，它将同时包装获取和检查身份验证，因此您不需要在每次分派操作时检查用户是否已经过身份验证。

我发现的最接近的例子是：

const BASE_URL = 'http://localhost:3001/api/'

function callApi(endpoint, authenticated) {

  let token = localStorage.getItem('access_token') || null
  let config = {}

  if(authenticated) {
    if(token) {
      config = {
        headers: { 'Authorization': `Bearer ${token}` }
      }
    }
    else {
      throw "No token saved!"
    }
  }

  return fetch(BASE_URL + endpoint, config)
    .then(response =>
      response.text().then(text => ({ text, response }))
    ).then(({ text, response }) => {
      if (!response.ok) {
        return Promise.reject(text)
      }

      return text
    }).catch(err => console.log(err))
}

export const CALL_API = Symbol('Call API')

export default store => next => action => {

  const callAPI = action[CALL_API]

  // So the middleware doesn't get applied to every single action
  if (typeof callAPI === 'undefined') {
    return next(action)
  }

  let { endpoint, types, authenticated } = callAPI

  const [ requestType, successType, errorType ] = types

  // Passing the authenticated boolean back in our data will let us distinguish between normal and secret quotes
  return callApi(endpoint, authenticated).then(
    response =>
      next({
        response,
        authenticated,
        type: successType
      }),
    error => next({
      error: error.message || 'There was an error.',
      type: errorType
    })
  )
}

从这里采取：https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/

Answer 3

在前端进行身份验证是没有意义的，因为用户仍然可以直接调用您的服务器。您需要尽快将此逻辑移动到服务器。

一旦逻辑在服务器上，你只需要使用promises链接你的电话，比如

this.checkAuth()
    .then(this.doDbCall);

在发送其他操作之前检查用户是否获得授权的最佳方法

3 个答案: