强制使用谷歌浏览器

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,128 +36,174 @@
   </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',
+  name: 'Login',
-    components: {
+  components: {
-      UserOutlined,
+    UserOutlined,
-      LockOutlined,
+    LockOutlined,
+  },
+  data() {
+    return {
+      form: {
+        username: '',
+        password: '',
+      },
+      redirect: undefined,
+      dependencies: dependencies,
+      devDependencies: devDependencies,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      logo: 'settings/logo',
+      title: 'settings/title',
+    }),
+  },
+  watch: {
+    $route: {
+      handler(route) {
+        this.redirect = (route.query && route.query.redirect) || '/'
+      },
+      immediate: true,
     },
-    data() {
+  },
-      return {
+  mounted() {
-        form: {
+    this.form.username = ''
-          username: '',
+    this.form.password = ''
-          password: '',
+    /*  setTimeout(() => {
-        },
+      this.handleSubmit()
-        redirect: undefined,
+    }, 3000) */
-        dependencies: dependencies,
+    if (this.judgeAgent() !== 'Chrome') {
-        devDependencies: devDependencies,
+      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'
       }
     },
-    computed: {
+    handleRoute() {
-      ...mapGetters({
+      return this.redirect === '/404' || this.redirect === '/403'
-        logo: 'settings/logo',
+        ? '/home'
-        title: 'settings/title',
+        : this.redirect
-      }),
     },
-    watch: {
+    async handleSubmit() {
-      $route: {
+      // debugger
-        handler(route) {
+      try {
-          this.redirect = (route.query && route.query.redirect) || '/'
+        // console.log('登录', Decrypt(Encrypt(this.form.password)))
-        },
+        if (this.form.password !== this.form.password.trim()) {
-        immediate: true,
-      },
-    },
-    mounted() {
-      this.form.username = ''
-      this.form.password = ''
-      /*  setTimeout(() => {
-        this.handleSubmit()
-      }, 3000) */
-    },
-    methods: {
-      ...mapActions({
-        login: 'user/login',
-      }),
-      handleRoute() {
-        return this.redirect === '/404' || this.redirect === '/403'
-          ? '/home'
-          : this.redirect
-      },
-      async handleSubmit() {
-        // debugger
-        try {
-          // console.log('登录', Decrypt(Encrypt(this.form.password)))
-          if (this.form.password !== this.form.password.trim()) {
-            message.error('登陆失败，用户名或密码错误！')
-            return
-          }
-          await this.login({
-            password: Encrypt(this.form.password),
-            username: this.form.username,
-          })
-          window.sessionStorage.setItem('visits', JSON.stringify([]))
-          console.log('添加visits========================================>')
-          // console.log(this.handleRoute())
-          await this.$router.push('/home')
-        } catch (error) {
           message.error('登陆失败，用户名或密码错误！')
+          return
         }
-      },
+        await this.login({
+          password: Encrypt(this.form.password),
+          username: this.form.username,
+        })
+        window.sessionStorage.setItem('visits', JSON.stringify([]))
+        console.log('添加visits========================================>')
+        // console.log(this.handleRoute())
+        await this.$router.push('/home')
+      } catch (error) {
+        message.error('登陆失败，用户名或密码错误！')
+      }
     },
-  }
+  },
+}
 </script>
 <style lang="less">
-  .login-container {
+.login-container {
-    width: 100%;
+  width: 100%;
-    height: 100vh;
+  height: 100vh;
-    background: url('~@/assets/login_images/login_background.png');
+  background: url('~@/assets/login_images/login_background.png');
-    background-size: cover;
+  background-size: cover;
-    &-form {
+
-      width: calc(100% - 40px);
+  &-form {
-      height: 380px;
+    width: calc(100% - 40px);
-      padding: 4vh;
+    height: 380px;
-      margin-top: calc((100vh - 380px) / 2);
+    padding: 4vh;
-      margin-right: 20px;
+    margin-top: calc((100vh - 380px) / 2);
-      margin-left: 20px;
+    margin-right: 20px;
-      background: url('~@/assets/login_images/login_form.png');
+    margin-left: 20px;
-      background-size: 100% 100%;
+    background: url('~@/assets/login_images/login_form.png');
-      border-radius: 10px;
+    background-size: 100% 100%;
-      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
+    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;
-      width: 100%;
-      height: 40px;
-      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;
-    }
   }
+
+  &-hello {
+    font-size: 32px;
+    color: #fff;
+  }
+
+  &-title {
+    margin-bottom: 30px;
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &-tips {
+    position: fixed;
+    bottom: @vab-margin;
+    width: 100%;
+    height: 40px;
+    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>