React Next.js 集成状态管理器和共享Token

React Next.js 集成状态管理器和共享Token

最近项目中使用SSR框架next.js,过程中会遇到token存储,状态管理等一系列问题,现在总结并记录下来分享给大家。

Token存储

SSR和SPA最大的区别就是SSR会区分客户端Client和服务端Server,并且SSR之间只能通过cookie才能在Client和Server之间通信,例如:token信息,以往我们在SPA项目中是使用localStorage或者sessionStorage来存储,但是在SSR项目中Server端是拿不到的,因为它是浏览器的属性,要想客户端和服务端同时都能拿到我们可以使用Cookie,所以token信息只能存储到Cookie中。

那么我们选用什么插件来设置和读取Cookie信息呢?插件也有好多种,比如:cookie、js-cookie、react-cookie、nookie、set-cookie-parser等等,但是它们有个最大的问题就是需要手动去控制读取和设置,有没有一种插件或者中间件自动获取和设置token呢?答案是肯定的,就是接下来我们要用到的next-redux-cookie-wrapper插件,这个插件的作用就是将reducer里面的数据自动储存到cookie中,然后组件获取reducer中的数据会自动从cookie中拿,它是next-redux-wrapper插件推荐的,而next-redux-wrapper插件是连接redux中store数据的插件,接下来会讲到。

数据持久化

SSR项目我们不建议数据做持久化,除了上面的token以及用户名等数据量小的数据需要持久化外,其它的都应该从后台接口返回,否则就失去了使用SSR的目的(直接从服务端返回带有数据的html)了,还不如去使用SPA来得直接。

状态管理

如果你的项目不是很大,且组件不是很多,你完全不用考虑状态管理,只有当组件数量很多且数据不断变化的情况下你需要考虑状态管理。

我们知道Next.js也是基于React,所以基于React的状态管理器同样适用于Next.js,比较流行的状态管理有:

  • mobx
  • redux
  • redux-toolkit(redux的简化版)
  • recoil(react官方出品)
  • rematch(模块化做得比较好的)

这里有一篇文章专门介绍对比它们的,大家可以看看哪种比较适合自己。

最后我们选用的是redux的轻量级版本:redux-toolkit

下面我们会集成redux-toolkit插件及共享cookie插件next-redux-cookie-wrapper以及连接next.js服务端与redux store数据通信方法getServerSideProps的插件next-redux-wrapper

集成状态管理器Redux及共享Token信息

首先我们先创建next.js项目,创建完之后,我们执行下面几个步骤来一步步实现集成。

  1. 创建store/axios.js文件
  2. 修改pages/_app.js文件
  3. 创建store/index.js文件
  4. 创建store/slice/auth.js文件

1. 创建store/axios.js文件

创建axios.js文件目的是为了统一管理axios,方便slice中axios的设置和获取。

store/axios.js

import axios from 'axios';
import createAuthRefreshInterceptor from 'axios-auth-refresh';
import * as cookie from 'cookie';
import * as setCookie from 'set-cookie-parser';
// Create axios instance.
const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_HOST}`,
  withCredentials: false,
});
export default axiosInstance;

2、修改pages/_app.js文件

使用next-redux-wrapper插件将redux store数据注入到next.js。

pages/_app.js

import {Provider} from 'react-redux'
import {store, wrapper} from '@/store'

const MyApp = ({Component, pageProps}) => {
  return <Component {...pageProps} />
}

export default wrapper.withRedux(MyApp)

3、创建store/index.js文件

  1. 使用@reduxjs/toolkit集成reducer并创建store,
  2. 使用next-redux-wrapper连接next.js和redux,
  3. 使用next-redux-cookie-wrapper注册要共享到cookie的slice信息。

store/index.js

import {configureStore, combineReducers} from [email protected]/toolkit';
import {createWrapper} from 'next-redux-wrapper';
import {nextReduxCookieMiddleware, wrapMakeStore} from "next-redux-cookie-wrapper";
import {authSlice} from './slices/auth';
import logger from "redux-logger";

const combinedReducers = combineReducers({
  [authSlice.name]: authSlice.reducer
});
export const store = wrapMakeStore(() => configureStore({
  reducer: combinedReducers,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(
      nextReduxCookieMiddleware({
        // 在这里设置你想在客户端和服务器端共享的cookie数据,我设置了下面三个数据,大家依照自己的需求来设置就好
        subtrees: ["auth.accessToken", "auth.isLogin", "auth.me"],
      })
    ).concat(logger)
}));
const makeStore = () => store;
export const wrapper = createWrapper(store, {storeKey: 'key', debug: true});

4. 创建store/slice/auth.js文件

创建slice,通过axios调用后台接口返回token和user信息并保存到reducer数据中,上面的nextReduxCookieMiddleware会自动设置和读取这里的token和me及isLogin信息。

store/slice/auth.js

import {createAsyncThunk, createSlice} from [email protected]/toolkit';
import axios from '../axios';
import qs from "qs";
import {HYDRATE} from 'next-redux-wrapper';

// 获取用户信息
export const fetchUser = createAsyncThunk('auth/me', async (_, thunkAPI) => {
  try {
    const response = await axios.get('/account/me');
    return response.data.name;
  } catch (error) {
    return thunkAPI.rejectWithValue({errorMsg: error.message});
  }
});

// 登录
export const login = createAsyncThunk('auth/login', async (credentials, thunkAPI) => {
  try {
  
    // 获取token信息
    const response = await axios.post('/auth/oauth/token', qs.stringify(credentials));
    const resdata = response.data;
    if (resdata.access_token) {
      // 获取用户信息
      const refetch = await axios.get('/account/me', {
        headers: {Authorization: `Bearer ${resdata.access_token}`},
      });
      
      return {
        accessToken: resdata.access_token,
        isLogin: true,
        me: {name: refetch.data.name}
      };
    } else {
      return thunkAPI.rejectWithValue({errorMsg: response.data.message});
    }

  } catch (error) {
    return thunkAPI.rejectWithValue({errorMsg: error.message});
  }
});

// 初始化数据
const internalInitialState = {
  accessToken: null,
  me: null,
  errorMsg: null,
  isLogin: false
};

// reducer
export const authSlice = createSlice({
  name: 'auth',
  initialState: internalInitialState,
  reducers: {
    updateAuth(state, action) {
      state.accessToken = action.payload.accessToken;
      state.me = action.payload.me;
    },
    reset: () => internalInitialState,
  },
  extraReducers: {
    // 水合,拿到服务器端的reducer注入到客户端的reducer,达到数据统一的目的
    [HYDRATE]: (state, action) => {
      console.log('HYDRATE', state, action.payload);
      return Object.assign({}, state, {...action.payload.auth});
    },
    [login.fulfilled]: (state, action) => {
      state.accessToken = action.payload.accessToken;
      state.isLogin = action.payload.isLogin;
      state.me = action.payload.me;
    },
    [login.rejected]: (state, action) => {
      console.log('action=>', action)
      state = Object.assign(Object.assign({}, internalInitialState), {errorMsg: action.payload.errorMsg});
      console.log('state=>', state)
      // throw new Error(action.error.message);
    },
    [fetchUser.rejected]: (state, action) => {
      state = Object.assign(Object.assign({}, internalInitialState), {errorMsg: action.errorMsg});
    },
    [fetchUser.fulfilled]: (state, action) => {
      state.me = action.payload;
    }
  }
});

export const {updateAuth, reset} = authSlice.actions;

这样就完成了所有插件的集成,接着我们运行网页,登录输入用户名密码,你会发现上面的数据都以密码的形式保存在Cookie中。

Next.js 集成状态管理器和共享Token

剩下代码

pages/login.js

import React, {useState, useEffect} from "react";
import {Form, Input, Button, Checkbox, message, Alert, Typography} from "antd";
import Record from "../../components/layout/record";
import styles from "./index.module.scss";
import {useRouter} from "next/router";
import {useSelector, useDispatch} from 'react-redux'
import {login} from '@/store/slices/auth';
import {wrapper} from '@/store'


const {Text, Link} = Typography;
const layout = {
  labelCol: {span: 24},
  wrapperCol: {span: 24}
};
const Login = props => {
  const dispatch = useDispatch();
  const router = useRouter();
  const [isLoding, setIsLoading] = useState(false);
  const [error, setError] = useState({
    show: false,
    content: ""
  });

  function closeError() {
    setError({
      show: false,
      content: ""
    });
  }

  const onFinish = async ({username, password}) => {
    if (!username) {
      setError({
        show: true,
        content: "请输入用户名"
      });
      return;
    }
    if (!password) {
      setError({
        show: true,
        content: "请输入密码"
      });
      return;
    }
    setIsLoading(true);
    let res = await dispatch(login({
      grant_type: "password",
      username,
      password
    }));
    if (res.payload.errorMsg) {
      message.warning(res.payload.errorMsg);
    } else {
      router.push("/");
    }
    setIsLoading(false);
  };

  function render() {
    return props.isLogin ? (
      <></>
    ) : (
      <div className={styles.container}>
        <div className={styles.content}>
          <div className={styles.card}>
            <div className={styles.cardBody}>
              <div className={styles.error}>{error.show ?
                <Alert message={error.content} type="error" closable afterClose={closeError}/> : null}</div>
              <div className={styles.cardContent}>
                <Form
                  {...layout}
                  name="basic"
                  initialValues={{remember: true}}
                  layout="vertical"
                  onFinish={onFinish}
                  // onFinishFailed={onFinishFailed}
                >
                  <div className={styles.formlabel}>
                    <b>用户名或邮箱</b>
                  </div>
                  <Form.Item name="username">
                    <Input size="large"/>
                  </Form.Item>
                  <div className={styles.formlabel}>
                    <b>密码</b>
                    <Link href="/account/password_reset" target="_blank">
                      忘记密码
                    </Link>
                  </div>
                  <Form.Item name="password">
                    <Input.Password size="large"/>
                  </Form.Item>

                  <Form.Item>
                    <Button type="primary" htmlType="submit" block size="large" className="submit" loading={isLoding}>
                      {isLoding ? "正在登录..." : "登录"}
                    </Button>
                  </Form.Item>
                </Form>
                <div className={styles.newaccount}>
                  首次使用Seaurl?{" "}
                  <Link href="/join?ref=register" target="_blank">
                    创建一个账号
                  </Link>
                  {/* <a className="login-form-forgot" href="" >
                                    创建一个账号</a> */}
                </div>
              </div>
            </div>

            <div className={styles.recordWrapper}>
              <Record/>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return render();
};

export const getServerSideProps = wrapper.getServerSideProps(store => ({ctx}) => {
  const {isLogin, me} = store.getState().auth;
  if(isLogin){
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
  return {
    props: {}
  };
});

export default Login;

注意

1、使用了next-redux-wrapper一定要加HYDRATE,目的是同步服务端和客户端reducer数据,否则两个端数据不一致造成冲突。

[HYDRATE]: (state, action) => {
      console.log('HYDRATE', state, action.payload);
      return Object.assign({}, state, {...action.payload.auth});
    },

2、注意next-redux-wrappernext-redux-cookie-wrapper版本。

"next-redux-cookie-wrapper": "^2.0.1",
"next-redux-wrapper": "^7.0.2",

总结

  1. ssr项目不要用持久化,而是直接从server端请求接口拿数据直接渲染,否则失去使用SSR的意义了;
  2. Next.js分为静态渲染和服务端渲染,其实SSR项目如果你的项目很小,或者都是静态数据可以考虑直接使用客户端静态方法getStaticProps来渲染。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » React Next.js 集成状态管理器和共享Token

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们