强制使用谷歌浏览器

front/src/views/login/index.vue

@@ -15,22 +15,16 @@
               </a-input>
             </a-form-item>
             <a-form-item>
-              <a-input
+              <a-input v-model:value="form.password" type="password" placeholder="Password">
-                v-model:value="form.password"
-                type="password"
-                placeholder="Password"
-              >
                 <template v-slot:prefix>
                   <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                 </template>
               </a-input>
             </a-form-item>
             <a-form-item>
-              <a-button
+              <!-- IE Chrome -->
-                type="primary"
+              <a-button type="primary" html-type="submit"
-                html-type="submit"
+                :disabled="form.username === '' || form.password === '' || judgeAgent() !== 'Chrome'">
-                :disabled="form.username === '' || form.password === ''"
-              >
                 登录
               </a-button>
             </a-form-item>
@@ -42,13 +36,13 @@
   </div>
 </template>
 <script>
-  import { dependencies, devDependencies } from '*/package.json'
+import { dependencies, devDependencies } from '*/package.json'
-  import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
-  import { Encrypt } from '@/utils/crypto'
+import { Encrypt } from '@/utils/crypto'
-  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
-  import { message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 
-  export default {
+export default {
   name: 'Login',
   components: {
     UserOutlined,
@@ -85,11 +79,50 @@
     /*  setTimeout(() => {
       this.handleSubmit()
     }, 3000) */
+    if (this.judgeAgent() !== 'Chrome') {
+      Modal.warning({
+        title: '提示',
+        content: '请使用谷歌浏览器！',
+      });
+    }
   },
   methods: {
     ...mapActions({
       login: 'user/login',
     }),
+    // 判断浏览器
+    judgeAgent() {
+      let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
+      let isOpera = userAgent.indexOf('Opera') > -1
+      //判断是否Opera浏览器
+      if (isOpera) {
+        return 'Opera'
+      }
+      //判断是否Firefox浏览器
+      if (userAgent.indexOf('Firefox') > -1) {
+        return 'FF'
+      }
+      //判断是否chorme浏览器
+      if (userAgent.indexOf('Chrome') > -1) {
+        return 'Chrome'
+      }
+      //判断是否Safari浏览器
+      if (userAgent.indexOf('Safari') > -1) {
+        return 'Safari'
+      }
+      //判断是否IE浏览器
+      if (
+        userAgent.indexOf('compatible') > -1 &&
+        userAgent.indexOf('MSIE') > -1 &&
+        !isOpera
+      ) {
+        return 'IE'
+      }
+      //判断是否Edge浏览器
+      if (userAgent.indexOf('Trident') > -1) {
+        return 'Edge'
+      }
+    },
     handleRoute() {
       return this.redirect === '/404' || this.redirect === '/403'
         ? '/home'
@@ -116,14 +149,15 @@
       }
     },
   },
-  }
+}
 </script>
 <style lang="less">
-  .login-container {
+.login-container {
   width: 100%;
   height: 100vh;
   background: url('~@/assets/login_images/login_background.png');
   background-size: cover;
+
   &-form {
     width: calc(100% - 40px);
     height: 380px;
@@ -136,15 +170,18 @@
     border-radius: 10px;
     box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
   }
+
   &-hello {
     font-size: 32px;
     color: #fff;
   }
+
   &-title {
     margin-bottom: 30px;
     font-size: 20px;
     color: #fff;
   }
+
   &-tips {
     position: fixed;
     bottom: @vab-margin;
@@ -153,17 +190,20 @@
     color: rgba(255, 255, 255, 0.856);
     text-align: center;
   }
+
   .ant-col {
     width: 100%;
     padding: 0 10px 0 10px;
   }
+
   .ant-input {
     height: 35px;
   }
+
   .ant-btn {
     width: 100%;
     height: 45px;
     border-radius: 99px;
   }
-  }
+}
 </style>