feat: 全局控制登录弹窗，添加全局登录拦截方法

README.md

@@ -101,6 +101,19 @@ export {
   @include adj(transform, translate3d(-50%, 0, 0));
 }
 
+```
 
+## 登录相关
+```javascript
+// 访问token
+this.$store.state.token
+// 设置token
+this.$store.commit('setToken')
+// 退出登录
+this.$store.commit('setLoginOut')
+// 获取登录的用户信息
+this.$store.state.userInfo
+// 是否需要登录拦截
+this.$isLoginValidate();
 ```
 

layouts/default.vue

@@ -15,17 +15,21 @@
 </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";
 
 export default {
   name: "Layout",
   components: { Header, Footer, BsLogin },
-  data() {
-    return {
-      loginVisible: true,
-    };
+  computed: {
+    loginVisible: {
+      get() {
+        return this.$store.state.loginVisible;
+      },
+      set(val) {
+        this.$store.commit("setLoginVisible", val);
+      },
+    },
   },
 };
 </script>

nuxt.config.js

@@ -42,7 +42,8 @@ export default {
   plugins: [
     '@/plugins/element-ui',
     '@/plugins/axios',
-    '@plugins/axiosTk.js'
+    '@plugins/axiosTk.js',
+    '@plugins/vue-inject.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

pages/index/index.vue

@@ -17,5 +17,8 @@ import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 export default {
   components: { Banner, Seckil },
+  mounted() {
+    this.$isLoginValidate();
+  },
 };
 </script>

plugins/vue-inject.js

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import { TOKEN_KEY } from "@/constants";
+
+const injectOptions = {
+  // 是否需要登录拦截
+  $isLoginValidate() {
+    if (this.$cookies.get(TOKEN_KEY)) {
+      return true;
+    }
+    this.$store.commit("setLoginVisible", true);
+    return false;
+  },
+};
+
+for (let key in injectOptions) {
+  Vue.prototype[key] = injectOptions[key];
+}

store/index.js

@@ -12,6 +12,7 @@ const ONE_DAY = 86400000; // 一天的毫秒数 24 * 60 * 60 * 1000;
 const state = () => ({
   token: "",
   userInfo: {},
+  loginVisible: false, // 是否展示登录弹窗
 });
 const mutations = {
   setUserInfo(state, info) {
@@ -29,6 +30,9 @@ const mutations = {
     state.userInfo = {};
     this.$cookies.remove(TOKEN_KEY);
   },
+  setLoginVisible(state, visible) {
+    state.loginVisible = visible;
+  },
 };
 const actions = {
   async nuxtServerInit({ state, commit, dispatch }) {
@@ -44,10 +48,6 @@ const actions = {
       commit("setUserInfo", result);
     }
   },
-  loginOut({ commit }) {
-    commit("setLoginOut");
-    // 此处请求接口
-  },
 };
 
 export { state, mutations, actions };