强制使用谷歌浏览器
This commit is contained in:
parent
1e06abbf11
commit
7996d8a701
|
|
@ -15,22 +15,16 @@
|
|||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-model:value="form.password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
>
|
||||
<a-input 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
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:disabled="form.username === '' || form.password === ''"
|
||||
>
|
||||
<!-- IE Chrome -->
|
||||
<a-button type="primary" html-type="submit"
|
||||
:disabled="form.username === '' || form.password === '' || judgeAgent() !== 'Chrome'">
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -42,128 +36,174 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dependencies, devDependencies } from '*/package.json'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { Encrypt } from '@/utils/crypto'
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { dependencies, devDependencies } from '*/package.json'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { Encrypt } from '@/utils/crypto'
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
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 {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
redirect: undefined,
|
||||
dependencies: dependencies,
|
||||
devDependencies: devDependencies,
|
||||
},
|
||||
mounted() {
|
||||
this.form.username = ''
|
||||
this.form.password = ''
|
||||
/* 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'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
logo: 'settings/logo',
|
||||
title: 'settings/title',
|
||||
}),
|
||||
handleRoute() {
|
||||
return this.redirect === '/404' || this.redirect === '/403'
|
||||
? '/home'
|
||||
: this.redirect
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(route) {
|
||||
this.redirect = (route.query && route.query.redirect) || '/'
|
||||
},
|
||||
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) {
|
||||
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('登陆失败，用户名或密码错误！')
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('~@/assets/login_images/login_background.png');
|
||||
background-size: cover;
|
||||
&-form {
|
||||
width: calc(100% - 40px);
|
||||
height: 380px;
|
||||
padding: 4vh;
|
||||
margin-top: calc((100vh - 380px) / 2);
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
background: url('~@/assets/login_images/login_form.png');
|
||||
background-size: 100% 100%;
|
||||
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;
|
||||
}
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('~@/assets/login_images/login_background.png');
|
||||
background-size: cover;
|
||||
|
||||
&-form {
|
||||
width: calc(100% - 40px);
|
||||
height: 380px;
|
||||
padding: 4vh;
|
||||
margin-top: calc((100vh - 380px) / 2);
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
background: url('~@/assets/login_images/login_form.png');
|
||||
background-size: 100% 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue