单点登录与JWT

JWT:JSON Web Token

JWT的作用是用户授权（Authorization）,而不是用户的身份认证（Authentication）

授权（Authorization）vs认证（Authentication）

用户认证指的是使用用户名、密码来验证当前用户的身份
- 就是用户登录
- 错误状态码：401 Unauthorized（未授权）
用户授权指当前用户有足够的权限访问特定的资源
- 错误状态码： 403 forbidden（禁止访问）

传统的Session登录

- 用户登录后，服务器会保存登录的session信息
- Session ID会通过cookie传递给前端
- http请求会附带cookie
- 是有状态登录

JWVT 彻底改变了用户授权与认证的过程

- 替换cookie
- JWT 信息只需要保存在客户端
- 是无状态登陆

在这里插入图片描述

Session vs JWT

Session需要保存在服务器上，而Session ID则保存在前端cookie中
JWT信息只需要保存在客户端
无状态登陆优势:分布式部署

JWT的优点与缺点

JWT官网：https://jwt.io/

优点

无状态，简单、方便，完美支持分布式部署
非对称加密，Token 安全性高

缺点

无状态，token一经发布则无法取消（无解 …）
明文传递，Token 安全性低（使用https可以解决）

redux-persist 登录持久化

cokkie 、session和web storage

cookie和web Storage保存在浏览器中;session保存于服务器上
cookie不超过4K，Web Storage上限5MB以上;session 无上限
cookie和web Storage 安全性差，session 性能差
cookie在http请求中会被自动携带;web Storage不会自动发送

无状态登录:JWT 只能选择使用cookie或者web storage来保存

Web Storage 好处

有效降低网络流量
快速显示数据
临时存储

Web Storage 类型

SessionStorage:仅在当前浏览器窗口关闭之前有效
localStorage:始终有效，窗口或浏览器关闭也一直保存

使用redux-persist做持久化

使用

npm install redux-persist

修改以下store.ts

import { createStore, applyMiddleware } from 'redux';
import languageReducer from "./language/languageReducer";
import recommendProductsReducer from "./recommendProducts/recommendProductsReducer";
import thunk from "redux-thunk";
import { actionLog } from "./middlewares/actionLog";
import { productDetailSlice } from "./productDetail/slice";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { productSearchSlice } from "./productSearch/slice";
import { userSlice } from "./user/slice";

const rootReducer = combineReducers({
    language: languageReducer,
    recommendProducts: recommendProductsReducer,
    productDetail: productDetailSlice.reducer,
    productSearch: productSearchSlice.reducer,
    user: userSlice.reducer
})

// const store = createStore(rootReducer, applyMiddleware(thunk, actionLog));
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware(), actionLog],
  devTools: true,
});

export type RootState = ReturnType<typeof store.getState>

export default store;

修改为以下

import { createStore, applyMiddleware } from 'redux';
import languageReducer from "./language/languageReducer";
import recommendProductsReducer from "./recommendProducts/recommendProductsReducer";
import thunk from "redux-thunk";
import { actionLog } from "./middlewares/actionLog";
import { productDetailSlice } from "./productDetail/slice";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { productSearchSlice } from "./productSearch/slice";
import { userSlice } from "./user/slice";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user"]
}

const rootReducer = combineReducers({
    language: languageReducer,
    recommendProducts: recommendProductsReducer,
    productDetail: productDetailSlice.reducer,
    productSearch: productSearchSlice.reducer,
    user: userSlice.reducer
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

// const store = createStore(rootReducer, applyMiddleware(thunk, actionLog));
const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware(), actionLog],
  devTools: true,
});

const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>

export default { store, persistor };

以下引用

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'antd/dist/antd.css';
import "./i18n/configs"
import { Provider } from "react-redux";
import store from "./redux/store";
import axios from "axios";

axios.defaults.headers['x-icode'] = 'FB80558A73FA658E';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

修改成

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "antd/dist/antd.css";
import "./i18n/configs";
import { Provider } from "react-redux";
import rootStore from "./redux/store";
import axios from "axios";
import { PersistGate } from "redux-persist/integration/react";

axios.defaults.headers["x-icode"] = "FB80558A73FA658E";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={rootStore.store}>
      <PersistGate persistor={rootStore.persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);