反应本机提取令牌，然后使用获取 API 获取用户详细信息

Question

我正在使用 React native 构建登录应用程序。对于身份验证，我正在使用弹簧启动应用程序。

这是用例。

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;
}
});
}
}

获取接口

//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 = 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,
});
}
}
}