在 React SPA 应用程序中存储和检索会话 Laravel Passport 令牌

Question

我想用 Passport Auth API 实现一个简单的 SPA 应用，

我尝试使用 localStorage（在 js 中）将令牌存储在那里，但它似乎不安全。所以我一直在寻找替代方案。

顺便说一句。 Laravel 5.8 反应 16.8

export const LogIn = formValues => async dispatch => {
    connect.post('auth/login', formValues).then(response => {
        return response;
      })
      .then(json => {
        if (json.status === 200) {
         // alert("Login Successful!");

          let userData = {
            email: formValues.email,
            auth_token: json.data.access_token,
            timestamp: new Date().toString()
          };

          let appState = {
            isLoggedIn: true,
            user: userData
          };

          // save app state with user date in local storage
          localStorage["appState"] = JSON.stringify(appState);

          return userData;

        } else alert("Login Failed!");

      })
      .catch(error => {
        let appState = {
          isLoggedIn: false,
          user: {}
        };

        localStorage["appState"] = JSON.stringify(appState);

        alert(`An Error Occured! ${error}`);
      });
};

我可以从我的应用程序登录和注销。只有在刷新时我才会丢失令牌。我已经在这里迷路了 2 周了:(

Answer 1

您需要做的是保持您的身份验证状态。

您可以通过创建上下文提供程序并访问组件内的值来做到这一点（查看React Redux Connect API 或查看React Context API）