🧐添加js-cookie插件解决服务端渲染时取不到vuex的问题

middleware/user.js

@@ -3,14 +3,13 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-08 09:15:06
- * @LastEditTime: 2022-11-08 09:42:08
+ * @LastEditTime: 2022-11-11 17:41:08
  */
 export default function({store, app: {$axios}}) {
   if(store.state.token !== '') {
     $axios.get('members/getMemberInfo').then((res)=> {
       if(res.code === 200) {
         store.commit('setUser',res.result)
-        localStorage.setItem('userInfo',JSON.stringify(res.result))
       }
     })
   }

package.json

@@ -17,6 +17,7 @@
     "@nuxtjs/composition-api": "^0.33.1",
     "core-js": "^3.25.3",
     "element-ui": "^2.15.10",
+    "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
     "qs": "^6.11.0",
     "throttle-debounce": "^5.0.0",

plugins/axios.js

@@ -3,9 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-19 13:58:11
- * @LastEditTime: 2022-11-03 15:36:24
+ * @LastEditTime: 2022-11-11 16:28:13
  */
 import { Message } from 'element-ui';
+import { removeToken } from '~/utils/cookie';
 
 export default function({store, app:{ $axios }, redirect} ) {
   $axios.onRequest(config => {
@@ -20,6 +21,7 @@ export default function({store, app:{ $axios }, redirect} ) {
       store.commit('OPEN_LOGIN',false)
       store.commit('DEL_TOKEN','')
       store.commit('setUser', {})
+      removeToken('Token')
       localStorage.removeItem('token')
       localStorage.removeItem('userInfo')
       return Promise.resolve(false)

store/index.js

@@ -3,8 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-25 17:19:19
- * @LastEditTime: 2022-11-02 16:03:41
+ * @LastEditTime: 2022-11-11 17:41:17
  */
+import { setToken, cookieParse } from '~/utils/cookie'
+
 export const state = () => ({
   userInfo: {
     memberInfo: {},
@@ -37,10 +39,17 @@ export const mutations = {
 
 export const actions = {
 
+
   nuxtServerInit ({commit, state}, {req}) {
-      if (req && req.headers && req.headers.token) {
-        commit('SET_TOKEN', req.headers.token)
+    let token = null
+    if (req && req.headers && req.headers.cookie) {
+      const parsed = cookieParse(req.headers.cookie)
+      try {
+        token = parsed.Token
+      } catch (err) {
       }
+      commit('SET_TOKEN', token)
+    }
   },
 
   login ({ commit }, params) {
@@ -48,6 +57,7 @@ export const actions = {
       this.$axios.get(`auth/getToken?code=${params}`).then(res => {
         const token = res.result.accessToken
         localStorage.setItem('token',token)
+        setToken('Token', token)
         commit('SET_TOKEN', token)
         resolve(token)
       }).catch(err => {

utils/cookie.js

@@ -0,0 +1,31 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-11 11:27:09
+ * @LastEditTime: 2022-11-11 13:43:02
+ */
+const Cookies = process.client ? require('js-cookie') : undefined
+
+export function getToken (TokenKey) {
+  return Cookies ? Cookies.get(TokenKey) : ''
+}
+
+export function setToken (TokenKey, token) {
+  return Cookies && Cookies.set(TokenKey, token)
+}
+
+export function removeToken (TokenKey) {
+  return Cookies && Cookies.remove(TokenKey)
+}
+
+// 解析cookie中的参数
+export function cookieParse (cookie) {
+  if (!cookie) { return {} }
+  const cookies = {}
+  cookie.split(';').forEach(item => {
+    const parts = item.split('=')
+    cookies[parts[0].trim()] = parts[1].trim()
+  })
+  return cookies
+}