Question

我正在构建一个基本CRUD应用程序的前端，该应用程序将与外部API进行交互。

我正在尝试构建一个简单的登录表单将POST请求（用户名和密码）发送到外部API进行验证，获取响应并将用户信息存储在会话中。

我们的API中已有用户列表。使用像Postman这样的工具，当我们发布正确的凭据并获得响应时，我会确认用户存在：

POST /api/v1/login

{
  "email": "email@gmail.com",
  "password": "password123"
}

Response:
{
  "data": {
    "team_id": "0987654321",
    "name": "John",
    "email": "email@gmail.com",
    "access_token": "1234567890qwerty"
  }
}

我很反应，自从我使用Javascript以来已经有一段时间了，我不太明白这是如何工作的。任何帮助将不胜感激。

如果此信息有点含糊，请道歉。

Answer 1

从API获得响应后，您应该存储前端可能需要的任何非敏感信息。如果您使用JWT之类的东西，可以将令牌存储在本地存储中，并使用jwt-decode库进行读取。

    fetch(this.email.value, this.password.value)
    .then(res => {
        localStorage.setItem('id_token', res.token) // Store token 
    })
    .catch(err => {
        console.log(err);
    });

使用处理授权的实用程序或帮助程序文件也很常见

/ utils的/ AuthUtility

    class AuthService{
        login(email, password) {
            return this.fetch('/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    email, 
                    password
                })
            })
              .then(res => {
                if(res.type == 'success'){
                    this.setToken(res.token) // Setting the token in localStorage
                    return Promise.resolve(res); 
                } else {
                    return Promise.reject(res)
                }
            })
        }


  // Other available methods
       setToken(idToken) {
        // Saves user token to localStorage
        localStorage.setItem('id_token', idToken)
       }

      getProfile() {
        // Using jwt-decode npm package to decode the token
        return decode(localStorage.getItem('id_token'); // assuming you have jwt token then use jwt-decode library
      }
    }

然后在您的登录组件中 //components/login.js

import AuthUtility from './utils/AuthUtility';

login = (e) => {


    this.Auth.login(this.email.value, this.password.value)
    .then(res => {
        this.props.history.push('/protectedRoute');
    })
    .catch(err => {
        console.log(error);
    });
}

Answer 2

我会使用非常受欢迎的http客户端“axios”

在您的反应应用中安装axios

npm install axios --save

将此代码添加到登录表单的click \ submit处理函数中：

axios.post('http://[PATH_HERE]/api/v1/login', {
  "email": "email@gmail.com",
  "password": "password123"
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 3

使用 ant 设计在 React 上创建登录组件很简单，请按照以下步骤操作

在react中安装ant design

  npm install antd

然后安装蚂蚁图标 npm install --save @ant-design/icons 了解更多信息

欲了解更多信息，请click here

ReactJS简单登录表单

3 个答案: