React項目中一種維持登入的方法

1. 引入store.js庫

項目位址

npm i store      

2. 定義并導出存儲到本地的子產品(storageUtils.js)

// ! 本子產品主要是進行local資料存儲
import store from 'store'
const USER_KEY = 'user_key';
export default {
    // 儲存使用者
    saveUser(user) {
        store.set(USER_KEY,user);// 登入成功的時候，讀取使用者資料并放在記憶體中
            const user = result.data;
            // memoryUtils.user = user;
            storageUtils.saveUser(user);
    },
    // 讀取使用者
    getUser() {
        return store.get(USER_KEY) || {}
    },
    // 删除使用者
    removeUser() {
        store.remove(USER_KEY);
    }
}      

3. 登入成功時将使用者的資料通過storageUtils的saveUser方法進行儲存

// 登入成功的時候，讀取使用者資料并放在記憶體中// 将local中的user儲存到記憶體中去
const user = storageUtils.getUser();
memoryUtils.user = user;
const user = result.data;
// memoryUtils.user = user;
storageUtils.saveUser(user);      

4. 定義記錄使用者資訊的記憶體檔案（memoryUtils.js）

// ! 本檔案主要存放需要存儲的使用者資訊等内容
export default {
    user: {}
}      

5. 在入口檔案将local中的使用者資訊儲存到記憶體檔案中

// 将local中的user儲存到記憶體中去
const user = storageUtils.getUser();
memoryUtils.user = user;      

6. 登入成功後的界面首先檢測記憶體檔案中是否有使用者，有則加載，無則跳轉到登入路由

const user = memoryUtils.user;
// 如果沒有擷取到使用者id則直接傳回登入頁面
if (!user._id) {
    return <Redirect to='/login' />
}