🎨 oauth 与 userInfo 分离

components/layouts/mobile/header.vue

@@ -72,6 +72,8 @@
 </template>
 
 <script>
+  import { isBrowser } from '~/environment'
+
   const Cookie = process.client ? require('js-cookie') : undefined
   export default {
     name: "MobileHeader",
@@ -83,10 +85,28 @@
         return this.$store.state.oauth;
       },
       avatarURL() {
-        return this.$store.state.oauth?.avatarURL;
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
+          }
+        }
+        return _ts.$store.state.userInfo?.avatarURL;
       },
       nickname() {
-        return this.$store.state.oauth?.nickname;
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
+          }
+        }
+        return _ts.$store.state.userInfo?.nickname;
       },
       hasPermissions() {
         return this.$store.getters.hasPermissions('blog_admin');

components/layouts/pc/header.vue

@@ -87,6 +87,8 @@
 </template>
 
 <script>
+  import { isBrowser } from '~/environment'
+
   const Cookie = process.client ? require('js-cookie') : undefined
   export default {
     name: "PcHeader",
@@ -98,10 +100,28 @@
         return this.$store.state.oauth;
       },
       avatarURL() {
-        return this.$store.state.oauth?.avatarURL;
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
+          }
+        }
+        return _ts.$store.state.userInfo?.avatarURL;
       },
       nickname() {
-        return this.$store.state.oauth?.nickname;
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
+          }
+        }
+        return _ts.$store.state.userInfo?.nickname;
       },
       hasPermissions() {
         return this.$store.getters.hasPermissions('blog_admin');

pages/login.vue

@@ -94,12 +94,17 @@
                 }
                 let auth = {
                   accessToken: res.user.token,
-                  nickname: res.user.nickname,
-                  avatarURL: res.user.avatarUrl,
                   idUser: res.user.idUser,
                   role: res.user.weights
                 }
+
+                let user = {
+                  nickname: res.user.nickname,
+                  avatarURL: res.user.avatarUrl
+                }
                 _ts.$store.commit('setAuth', auth) // mutating to store for client rendering
+                localStorage.setItem('user', JSON.stringify(user))
+                _ts.$store.commit('setUser', user) // mutating to store for client rendering
                 Cookie.set('auth', auth)
                 _ts.$router.push({
                   name: 'index'
@@ -134,7 +139,7 @@
         let data = {
           email: email
         };
-        _ts.axios.post('/console/get-forget-password-email', data).then(function (res) {
+        _ts.$axios.$post('/api/console/get-forget-password-email', data).then(function (res) {
           _ts.loading = false;
           _ts.forget = false;
           if (res) {

store/index.js

@@ -6,6 +6,7 @@ export const state = () => {
   return {
     activeMenu: 'index',
     oauth: null,
+    userInfo: null,
     locale: 'zh_CN',
     uploadHeaders: ''
   }
@@ -15,6 +16,9 @@ export const mutations = {
   setAuth (state, auth) {
     state.oauth = auth
   },
+  setUser (state, data) {
+    state.userInfo = data
+  },
   setActiveMenu (state, activeMenu) {
     state.activeMenu = activeMenu
   },
@@ -22,8 +26,8 @@ export const mutations = {
     state.uploadHeaders = data
   },
   setUserInfo(state, data) {
-    state.oauth.avatarURL = data.avatarUrl;
+    state.userInfo.avatarURL = data.avatarUrl;
-    state.oauth.nickname = data.nickname;
+    state.userInfo.nickname = data.nickname;
   }
 }