feat: store文件添加登录相关方法

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npm.taobao.org/
+sass_binary_site="https://npm.taobao.org/mirrors/node-sass"

components/BsLogin.vue

@@ -3,6 +3,8 @@
     <el-dialog
       :visible.sync="dialogTableVisible"
       :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
       width="20%"
     >
       <div class="bs-login-wrap">
@@ -50,11 +52,15 @@
             </span>
           </div>
         </div>
+        <div class="bs-login-wrap__btn--close" @click="onClose">
+          <img src="@/static/images/login/icon-close.png" />
+        </div>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 import { Message } from "element-ui";
 import { ApiGetCode, ApiPostLogin } from "@/plugins/api/account";
 import { IsPhone } from "/plugins/utils";
@@ -94,6 +100,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["token"]),
     dialogTableVisible: {
       get() {
         return this.visible;
@@ -140,16 +147,25 @@ export default {
             Message.error("请勾选同意《用户协议》和《隐私协议》");
             return;
           }
-          await ApiPostLogin({ ...this.form });
+          const { result } = await ApiPostLogin({ ...this.form });
+          if (result) {
+            this.dialogTableVisible = false;
+            this.$store.commit("setToken", result.token);
+            this.$store.dispatch("getUserInfo");
+          }
         }
       });
     },
+    onClose() {
+      this.dialogTableVisible = false;
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .bs-login {
   /deep/.el-dialog {
+    border-radius: 4px;
     .el-dialog__header {
       display: none;
     }
@@ -222,6 +238,17 @@ export default {
           }
         }
       }
+      .bs-login-wrap__btn--close {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 0);
+        bottom: -60px;
+        cursor: pointer;
+        img {
+          width: 30px;
+          height: 30px;
+        }
+      }
     }
   }
 }

constants/index.js

@@ -0,0 +1,8 @@
+/**
+ * 全局常量，请避免使用魔法数字
+ */
+const TOKEN_KEY = 'msbPcToken';
+
+export {
+  TOKEN_KEY
+}

layouts/default.vue

@@ -15,6 +15,7 @@
 </template>
 <script>
 import BsLogin from "@/components/BsLogin.vue";
+import { TOKEN_KEY } from "@/constants";
 import Header from "./module/header/index.vue";
 import Footer from "./module/footer/index.vue";
 

layouts/module/footer/index.vue

@@ -21,6 +21,7 @@
 </template>
 <script>
 export default {
+  name: "LayoutFooter",
   data() {
     return {
       promiseList: [

nuxt.config.js

@@ -42,8 +42,7 @@ export default {
   plugins: [
     '@/plugins/element-ui',
     '@/plugins/axios',
-    { src: '@plugins/axiosTk.js', ssr: false },
+    '@plugins/axiosTk.js'
-    { src: '@plugins/storeStorage.js', ssr: false },
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -55,7 +54,8 @@ export default {
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    'cookie-universal-nuxt'
   ],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
+    "cookie-universal-nuxt": "^2.1.5",
     "core-js": "^3.19.3",
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",

plugins/api/account.js

@@ -35,5 +35,5 @@ export const ApiPostLogin = (data) => ToAsyncAwait(axios.post(`${BASE_URL}/user/
  * 获取手机验证码
  * @param {*} params 
  */
-export const ApiGetCode = (params) => ToAsyncAwait(axios.get(`${BASE_URL}/user/login/verificationCode`, params));
+export const ApiGetCode = (params) => ToAsyncAwait(axios.get(`${BASE_URL}/user/login/verificationCode`, { params }));
 

plugins/axiosTk.js

@@ -23,7 +23,7 @@ export default function ({$axios, store}, inject) {
 			}
 			if(result.code === 'TOKEN_FAIL'){
 				alert('这里要弹登录')
-				store.commit('SET_TOKEN', '');
+				store.commit('setLoginOut');
 				return result;
 			}
 			return Promise.reject(result);

plugins/storeStorage.js

@@ -1,14 +0,0 @@
-
-
-/*
- * @Author: ch
- * @Date: 2022-05-04 21:15:17
- * @LastEditors: ch
- * @LastEditTime: 2022-05-07 22:33:57
- * @Description: 服务端没有localStorage对象，在Sotre中不能直接取值，在plugins中统一为state做一次初始取值处理
- */
-import { TOKEN } from "./config/sotrageKey";
-export default ({store})=>{
-	// 获取storage中的token
-	store.commit('SET_TOKEN',localStorage.getItem(TOKEN));
-}

store/index.js

@@ -5,16 +5,49 @@
  * @LastEditTime: 2022-05-07 22:33:28
  * @Description: file content
  */
+import { TOKEN_KEY } from "@/constants";
+import { ApiGetCurrentUser } from "@/plugins/api/account";
+const ONE_DAY = 86400000; // 一天的毫秒数 24 * 60 * 60 * 1000;
 
-import { TOKEN } from "@/plugins/config/sotrageKey";
+const state = () => ({
+  token: "",
+  userInfo: {},
+});
+const mutations = {
+  setUserInfo(state, info) {
+    state.userInfo = info;
+  },
+  setToken(state, token) {
+    state.token = token;
+    this.$cookies.set(TOKEN_KEY, token, {
+      path: "/",
+      maxAge: ONE_DAY,
+    });
+  },
+  setLoginOut(state) {
+    state.token = "";
+    state.userInfo = {};
+    this.$cookies.remove(TOKEN_KEY);
+  },
+};
+const actions = {
+  async nuxtServerInit({ state, commit, dispatch }) {
+    const token = this.$cookies.get(TOKEN_KEY);
+    if (!state.token && token) {
+      commit("setToken", token);
+      await dispatch("getUserInfo");
+    }
+  },
+  async getUserInfo({ commit }) {
+    const { result } = await ApiGetCurrentUser();
+    if (result) {
+      commit("setUserInfo", result);
+    }
+  },
+  loginOut({ commit }) {
+    commit("setLoginOut");
+    // 此处请求接口
+  },
+};
 
-
+export { state, mutations, actions };
-export const state = () => ({
-	token: ''
-  })
-export const mutations = {
-	SET_TOKEN (state, token = ''){
-		state.token = token;
-		token ? localStorage.setItem(TOKEN, token) : localStorage.removeItem(TOKEN);
-	}
-}