反应原生获取令牌，然后使用 fetch api 获取用户详细信息

Question

我正在使用 React native 构建登录应用程序。对于身份验证，我正在使用 spring boot 应用程序。

这是用例。

1. 用户访问客户端的登录屏幕并输入用户名和密码。
2. 使用 fetch API 将本机发送请求响应到服务器。
3. 如果令牌对象返回，则登录（用户名/密码）是正确的。
4. 如果令牌正确，应用程序应再次调用服务器以通过令牌获取用户详细信息。

问题是 - 我如何首先调用 API 来验证登录并获取令牌，然后在获取有效令牌后进行另一个 API 调用以获取用户详细信息。

代码如下：

import { dologin,getUser } from "../../API";

和登录处理程序

handleLogin = () => {
    const { username, password } = this.state

    if (username.length == 0 || password.length == 0){
        this.setState({
          errorMessage: 'Login and password is required.',
          loginProcessing: false,
        });
    } else {

      this.setState({errorMessage: null});


      dologin(username, password).then(accessToken => {

        if(!accessToken.state){
          this.setState({
            errorMessage: accessToken.data,
            loginProcessing: false,
          });
          return null;
        } else{
          return accessToken.data;
        }
      });

    }
}

获取 API

//get user by token
export const getUser = (token) => {
if(token == null) return null;
return fetch('http://localhost:8080/api/user/get', {
    method: 'GET',
    headers: {"Authorization": "Bearer " + token}
}).then((response) => {
  console.log(response.json());
    return response.json();
}).catch((err) => {
    console.log(err);
})
}


export const dologin = (username, password) => {

  var details = {
     username: username,
     password: password,
     grant_type:'password'
 };

 var formBody = [];
  for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
  }


  return fetch('http://localhost:8080/oauth/token', {
        method: 'POST',
        headers: {
            "Authorization": "Basic " + btoa("enrecover:EsTEsBDETSEWAvAWcsI"),
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        },
        body: formBody.join("&")
    }).then(res => {
        if(res.status === 200){
            return {status: true, data:res.json() }
        } else {
            return {status: false, data:"Invalid username or password." }
        }
    })
}

Answer 1

制作handleLogin异步函数，试试这个

handleLogin = async () => {
  const { username, password } = this.state

  if (username.length == 0 || password.length == 0) {
    this.setState({
      errorMessage: 'Login and password is required.',
      loginProcessing: false,
    });
  } else {
    let loginResponse = await dologin(username, password);
    if (loginResponse.status) {
        // if loginResponse = {token: "tokenValue"}
        userDetails = await getUser(loginResponse.token);
        console.log("User Details",userDetails)
    } else {
      this.setState({
        errorMessage: loginResponse.data,
        loginProcessing: false,
      });
    }

  }
}