在React SPA App中存储和检索会话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}`);
      });
};

我可以从我的APP登录和注销。 只有刷新后，我才会丢失令牌。 我已经在这里迷路了两个星期了：(

Answer 1

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

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