1111

components/smallCommon/CusButton.vue

@@ -39,6 +39,9 @@ export default {
     color: rgba(255, 255, 255, 1);
     text-align: left;
     vertical-align: top;
+    a {
+      color: rgba(255, 255, 255, 1) !important;
+    }
     &.small {
       padding: 2px 10px;
       background: linear-gradient(180deg, rgba(188, 216, 247, 0.4) 0%, rgba(152, 217, 237, 0.15) 48.61%, rgba(156, 255, 248, 0.4) 100%);

middleware/auth.js

@@ -0,0 +1,46 @@
+// 在某个适当的时间点检查登录状态是否过期
+function isLoginExpired(loginTimestamp, expirationDuration) {
+  // 获取登录时间戳
+  // 如果没有登录时间戳，说明用户未登录或状态已过期
+  if (!loginTimestamp) {
+    return true;
+  }
+
+  // 计算登录时间和现在的时间差
+  const currentTimestamp = Date.now();
+  const duration = currentTimestamp - loginTimestamp;
+
+  // 如果时间差大于3小时的毫秒数，则登录状态过期
+  return duration > expirationDuration;
+}
+
+
+export default function ({ route,  redirect, store }) {
+  if (route.name === 'manager-login') {
+    return
+  }
+  if (localStorage.getItem('userInfo')) {
+    const cache = JSON.parse(localStorage.getItem('userInfo'))
+    const { expire, loginTime } = cache
+    // 在页面加载时检查登录状态
+    if (isLoginExpired(loginTime, expire)) {
+      // 用户登录已过期，执行登录过期的逻辑
+      console.log('登录已过期');
+      return redirect('/manager/login')
+    } else {
+      // 用户登录有效，执行登录有效的逻辑
+      store.dispatch('user/setUserInfo', cache)
+      if (route.path === '/') {
+        return redirect('/home')
+      }
+    }
+  } else {
+    // 假设用户信息存储在 Vuex store 中
+    const user = store.state.user
+    // 检查路由是否需要认证
+    if (!user.isLogin) {
+      return redirect('/manager/login')
+    }
+  }
+
+}

nuxt.config.js

@@ -39,6 +39,10 @@ export default {
     '@/assets/styles/mixin.less'
   ],
 
+  router: {
+    middleware: 'auth' // 应用全局中间件
+  },
+
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '@/plugins/antd-ui',

pages/cleanTravel/home.vue

@@ -87,9 +87,15 @@
             </BFC>
           </ModuleContent>
           <butgroup>
-            <cus-button>厂区车辆台账</cus-button>
-            <cus-button>清洁运输趋势</cus-button>
-            <cus-button>磅秤台账</cus-button>
+            <cus-button>
+              <nuxt-link to="/cleanTravel/ledger">厂区车辆台账</nuxt-link>
+            </cus-button>
+            <cus-button>
+              <nuxt-link to="/cleanTravel/trend">清洁运输趋势</nuxt-link>
+              </cus-button>
+            <cus-button>
+              <nuxt-link to="/cleanTravel/bangcheng">磅秤台账</nuxt-link>
+              </cus-button>
             <cus-button>门禁监控</cus-button>
           </butgroup>
         </flex-col>
@@ -346,7 +352,6 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #09151F;
 }
 
 .list-enter-active, .list-leave-active {

pages/home/index.vue

@@ -80,10 +80,18 @@
 
 
             <butgroup class="real-data">
-              <cus-button>有组织</cus-button>
-              <cus-button>无组织</cus-button>
-              <cus-button>清洁运输</cus-button>
-              <cus-button>视频广场</cus-button>
+              <cus-button>
+                <nuxt-link to="/youzuzhi/paifang">有组织</nuxt-link>
+              </cus-button>
+              <cus-button>
+                <nuxt-link to="/wuzuzhi/paifang">无组织</nuxt-link>
+                </cus-button>
+              <cus-button>
+                <nuxt-link to="/cleanTravel/home">清洁运输</nuxt-link>
+                </cus-button>
+              <cus-button>
+                <nuxt-link to="/video/list">视频广场</nuxt-link>
+                </cus-button>
             </butgroup>
           </div>
         </BFC>
@@ -355,7 +363,6 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #09151F;
 }
 
 .list-enter-active, .list-leave-active {

pages/manager/login.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 function hasErrors(fieldsError) {
   return Object.keys(fieldsError).some(field => fieldsError[field]);
 }
@@ -54,6 +55,7 @@ export default {
     });
   },
   methods: {
+    ...mapActions('user', ['setUserInfo']),
     // Only show error after a field is touched.
     usernameError() {
       const { getFieldError, isFieldTouched } = this.form;
@@ -69,8 +71,8 @@ export default {
       this.form.validateFields(async (err, values) => {
         if (!err) {
           const { data } = await this.$post('/api/User/login', values)
-          localStorage.setItem('userInfo', JSON.stringify(data))
-          this.$router.replace({ path: '/web1' })
+          this.setUserInfo({ expire: 1 * 60 * 60 * 1000, userInfo: data, loginTime: Date.now() })
+          this.$router.replace({ path: '/home' })
         }
       });
     },

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -156,7 +156,6 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #09151F;
 }
 
 .list-enter-active, .list-leave-active {

pages/visual/PeakCoalView.vue

@@ -260,7 +260,6 @@ export default {
 body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
-  background-color: #000;
   overflow: hidden;
 }
 

pages/wuzuzhi/huanjingzhili.vue

@@ -276,7 +276,6 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #09151F;
 }
 
 .list-enter-active, .list-leave-active {

plugins/setup.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
 
 
-
 Vue.prototype.$evBus = new Vue()

store/user.js

@@ -0,0 +1,20 @@
+
+
+export const state = {
+  isLogin: false,
+  userInfo: {}
+}
+
+export const mutations = {
+  setUserInfo (state, userInfo) {
+    state.userInfo = userInfo
+  }
+}
+
+export const actions = {
+  setUserInfo (state, userInfo) {
+    state.isLogin = true
+    state.userInfo = userInfo
+    localStorage.setItem('userInfo', JSON.stringify(userInfo))
+  }
+}