修改token失效 导致白屏问题， 目前设置的有效时长为2小时
This commit is contained in:
a0049873
parent
0ba3526904
commit
c95d9ac76e
|
|
@ -1,5 +1,7 @@
|
||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||||
import Layout from '@/layout'
|
import Layout from '@/layout'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
export const constantRoutes = [
|
export const constantRoutes = [
|
||||||
{
|
{
|
||||||
|
|
@ -567,4 +569,24 @@ const router = createRouter({
|
||||||
routes: constantRoutes,
|
routes: constantRoutes,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
let token = Cookies.get('ucsToken')
|
||||||
|
const tokenStartTime = window.localStorage.getItem('tokenStartTime')
|
||||||
|
// 定义失效时间
|
||||||
|
const timeOver = 2 * 60 * 60 * 1000
|
||||||
|
let date = new Date().getTime()
|
||||||
|
if (date - tokenStartTime > timeOver) {
|
||||||
|
token = null
|
||||||
|
}
|
||||||
|
console.log('判断token失效', token, date - tokenStartTime > timeOver)
|
||||||
|
if (!token) {
|
||||||
|
if (to.path == '/login') return next()
|
||||||
|
message.warning('登录失效，请重新登录！')
|
||||||
|
return next('/login')
|
||||||
|
} else if (to.path == '/login') {
|
||||||
|
return next('/home')
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,11 @@
|
||||||
</a-input>
|
</a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<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>
|
<template v-slot:prefix>
|
||||||
<LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
|
<LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -23,8 +27,15 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<!-- IE Chrome || judgeAgent() !== 'Chrome'-->
|
<!-- IE Chrome || judgeAgent() !== 'Chrome'-->
|
||||||
<a-button type="primary" html-type="submit"
|
<a-button
|
||||||
:disabled="form.username === '' || form.password === '' || !canOpen.includes(judgeAgent())">
|
type="primary"
|
||||||
|
html-type="submit"
|
||||||
|
:disabled="
|
||||||
|
form.username === '' ||
|
||||||
|
form.password === '' ||
|
||||||
|
!canOpen.includes(judgeAgent())
|
||||||
|
"
|
||||||
|
>
|
||||||
登录
|
登录
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
@ -36,191 +47,196 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 Cookies from 'js-cookie'
|
||||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
import { Encrypt } from '@/utils/crypto'
|
||||||
import { message, Modal } from 'ant-design-vue'
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { message, Modal } from 'ant-design-vue'
|
||||||
|
|
||||||
// 是否是西海岸
|
// 是否是西海岸
|
||||||
const isXiHaiAn = whoShow.itShowXiHaiAn
|
const isXiHaiAn = whoShow.itShowXiHaiAn
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
components: {
|
components: {
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
LockOutlined,
|
LockOutlined,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
form: {
|
form: {
|
||||||
username: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
|
},
|
||||||
|
redirect: undefined,
|
||||||
|
dependencies: dependencies,
|
||||||
|
devDependencies: devDependencies,
|
||||||
|
is360: false,
|
||||||
|
isIE: false,
|
||||||
|
canOpen: ['FF', 'Chrome'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters({
|
||||||
|
logo: 'settings/logo',
|
||||||
|
title: 'settings/title',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler(route) {
|
||||||
|
this.redirect = (route.query && route.query.redirect) || '/'
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
},
|
},
|
||||||
redirect: undefined,
|
|
||||||
dependencies: dependencies,
|
|
||||||
devDependencies: devDependencies,
|
|
||||||
is360: false,
|
|
||||||
isIE: false,
|
|
||||||
canOpen: ['FF', 'Chrome']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
logo: 'settings/logo',
|
|
||||||
title: 'settings/title',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
handler(route) {
|
|
||||||
this.redirect = (route.query && route.query.redirect) || '/'
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
},
|
||||||
},
|
mounted() {
|
||||||
mounted() {
|
this.form.username = ''
|
||||||
this.form.username = ''
|
this.form.password = ''
|
||||||
this.form.password = ''
|
|
||||||
|
|
||||||
if (!this.canOpen.includes(this.judgeAgent())) {
|
if (!this.canOpen.includes(this.judgeAgent())) {
|
||||||
Modal.warning({
|
Modal.warning({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '请使用谷歌或火狐浏览器！',
|
content: '请使用谷歌或火狐浏览器！',
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions({
|
|
||||||
login: 'user/login',
|
|
||||||
}),
|
|
||||||
// 判断浏览器
|
|
||||||
judgeAgent() {
|
|
||||||
let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
|
|
||||||
console.log('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'
|
|
||||||
: 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())
|
|
||||||
// 西海岸特殊处理
|
|
||||||
if (isXiHaiAn) {
|
|
||||||
await this.$router.push({
|
|
||||||
path: '/DetailsPageconetent',
|
|
||||||
query: {
|
|
||||||
select: '基础设施',
|
|
||||||
tecHnosphere: '',
|
|
||||||
appLiCation: ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
await this.$router.push('/home')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error('登陆失败，用户名或密码错误！')
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
methods: {
|
||||||
}
|
...mapActions({
|
||||||
|
login: 'user/login',
|
||||||
|
}),
|
||||||
|
// 判断浏览器
|
||||||
|
judgeAgent() {
|
||||||
|
let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
|
||||||
|
console.log('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'
|
||||||
|
: 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.localStorage.setItem('tokenStartTime', new Date().getTime())
|
||||||
|
window.sessionStorage.setItem('visits', JSON.stringify([]))
|
||||||
|
console.log(
|
||||||
|
'添加visits========================================>',
|
||||||
|
Cookies.get('ucsToken')
|
||||||
|
)
|
||||||
|
// console.log(this.handleRoute())
|
||||||
|
// 西海岸特殊处理
|
||||||
|
if (isXiHaiAn) {
|
||||||
|
await this.$router.push({
|
||||||
|
path: '/DetailsPageconetent',
|
||||||
|
query: {
|
||||||
|
select: '基础设施',
|
||||||
|
tecHnosphere: '',
|
||||||
|
appLiCation: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await this.$router.push('/home')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('登陆失败，用户名或密码错误！')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<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;
|
|
||||||
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%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 100vh;
|
||||||
color: rgba(255, 255, 255, 0.856);
|
background: url('~@/assets/login_images/login_background.png');
|
||||||
text-align: center;
|
background-size: cover;
|
||||||
}
|
|
||||||
|
|
||||||
.ant-col {
|
&-form {
|
||||||
width: 100%;
|
width: calc(100% - 40px);
|
||||||
padding: 0 10px 0 10px;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
.ant-input {
|
&-hello {
|
||||||
height: 35px;
|
font-size: 32px;
|
||||||
}
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-btn {
|
&-title {
|
||||||
width: 100%;
|
margin-bottom: 30px;
|
||||||
height: 45px;
|
font-size: 20px;
|
||||||
border-radius: 99px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue