使用 localStorage 进行身份验证

Question

下面的代码用于登录，但一开始我一直收到未定义的错误，我相信这可能是一切的时间安排，本地存储 setItem 花费的时间太长，试图设置延迟但我没有管理.

    async function login(username, password) {
         const response = await axios.post(API_URL + "signin", {
            username,
            password
          });
    
          if (response.data.accessToken && typeof window !== 'undefined') {
            localStorage.setItem("user", JSON.stringify(response.data));
         }
          
        return response.data;
 }

Answer 1

能不能试试看？

    async login(username, password) {
        axios.post(API_URL + "signin", {
            username, password
        })
            .then(response => {
                if (response.data.accessToken && typeof window !== 'undefined') {
                    localStorage.setItem("user", JSON.stringify(response.data));
                }
            })
        return response.data;
    }

Answer 2

如果没有看到您收到的确切错误，很难肯定地说，但对我来说有问题的是 response.data.accessToken 因为如果您尝试访问 accessToken 属性 of data 当 data 为空或未定义时，将导致错误。

我的建议是在访问 accessToken 属性之前添加检查以确保 response.data 是真实的。例如，

if(response.data && response.data.accessToken && ...) {

还有其他方法可以处理这个常见问题，例如 lodash 的 get 方法或可选链接。

Answer 3

问题是我加载用户名的地方是本地存储还没有设置，所以系统响应未定义，要解决这个问题，只需设置一个 if 语句，说明可用时加载用户详细信息

使用 localStorage 进行身份验证

React auth with localStorage

authentication

timing

reactjs