react admin和AuthProvider登录后没有重定向

Question

我注意到(使用一些console.log(方法checkAuth只在login方法之前而不是之后被调用了一些次，所以当登录正确完成时，令牌被存储在浏览器的本地存储器中，并且在最后方法login返回解析的承诺，checkAuth不再被调用，面板也不执行页面重定向如果我手动更改页面，它会正常工作，因为令牌在本地存储中，并且checkAuth方法能够正常检查

这是我的AuthProvider

import axios from "axios";
export default {
// called when the user attempts to log in
login: ({ username, password }) => {
username = encodeURIComponent(username);
password = encodeURIComponent(password);
const tokenUrl = "https://myendpoint/profili/token";
const headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
const config = {
headers
};
const data = `username=${username}&password=${password}&grant_type=password`;
axios.post(tokenUrl,data, config)
.then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response;
})
.then(response => {
localStorage.setItem('token', response.data);
})
.catch((error) => {
throw new Error('Network error');
});
console.log("LOGIN");
return Promise.resolve();
},
// called when the user clicks on the logout button
logout: () => {
localStorage.removeItem('token');
return Promise.resolve();
},
// called when the API returns an error
checkError: ({ status }) => {
if (status === 401 || status === 403) {
console.log("passato in checkError");
localStorage.removeItem('token');
return Promise.reject();
}
return Promise.resolve();
},
// called when the user navigates to a new location, to check for authentication
checkAuth: () => {
console.log("CHECK AUTH");
return localStorage.getItem('token')
? Promise.resolve()
: Promise.reject();
},
// called when the user navigates to a new location, to check for permissions / roles
getPermissions: () => Promise.resolve(),
};

Answer 1

我认为您做了错误的返回。您的登录函数在发出axios HTTP POST请求的那一刻返回Promise.resolve((，早在从身份验证服务器获得响应之前。

相反，将函数的返回方式替换为：

return axios.post(tokenUrl,data, config)
.then(response =>
{
if (response.status < 200 || response.status >= 300)
{
throw new Error(response.statusText);
}
return response;
}).then(response =>
{
localStorage.setItem('token', response.data);
})
.catch((error) => {
throw new Error('Network error');
});

这样，Promise解析只有在身份验证服务器响应后才会发生。