重定向到React中的登錄頁面

Question

我有一個Redux存儲一個當前登錄的用戶。刷新頁面時，狀態丟失了，我想做的就是刷新任何要重定向到登錄頁面的組件時，該如何做。我能做到嗎？

Answer 1

每當您刷新頁面時，您的商店狀態都會丟失。 要保持此狀態（假設您正在開發Web應用程序），必須使用瀏覽器存儲選項之一保存用戶的登錄狀態。

簡短示例：

// Setting the user info to the local storage
    localStorage.setItem('userId', 'Logged');

// Retrieving the information before rendering the route component
var userInfo = localStorage.getItem('userId');

請參閱此鏈接以獲取完整示例。

Obs：這是一個JavaScript問題，而不是React.js問題

Answer 2

我對登錄進行重定向時使用的是LocalStorage 。

我只是將登錄數據存儲到LocalStorage 。

主頁組件

import React from 'react';
import { Redirect } from 'react-router-dom';
import storage from 'lib/storage';

const MainPage = () => {
  function redirect(){
    if(storage.get('user')){
      return <Redirect to="/login" />
    }else{
      return null;
    }
  }

  return (
    <main>
      {redirect()}
      /* ... */
    </main>
  )
}

lib / storage.js

export default (function () {
  const st = localStorage || {};
  return {
    set: (key, object) => {
      const arr = [];
      arr.push(JSON.stringify(object));
      st[key] = arr;
    },
    add: (key, object) => {
      let old = st.getItem(key);
      if (old === null) old = '';
      st.setItem(key, old + ((typeof object) === 'string' ? object : JSON.stringify(object)));

    },
    get: (key) => {
      if (!st[key]) {
        return null;
      }
      const value = st[key];

      try {
        const parsed = JSON.parse(value);
        return parsed;
      } catch (e) {
        return value;
      }
    },
    remove: (key) => {
      if (localStorage) {
        return localStorage.removeItem(key);
      }
      delete st[key];
    }
  }
})();