修改token失效 导致白屏问题， 目前设置的有效时长为2小时
This commit is contained in:
a0049873
parent
0ba3526904
commit
c95d9ac76e
|
|
@ -1,5 +1,7 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Layout from '@/layout'
|
||||
import { message } from 'ant-design-vue'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
export const constantRoutes = [
|
||||
{
|
||||
|
|
@ -567,4 +569,24 @@ const router = createRouter({
|
|||
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
|
||||
|
|
|
|||
|
|
@ -15,7 +15,11 @@
|
|||
</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>
|
||||
|
|
@ -23,8 +27,15 @@
|
|||
</a-form-item>
|
||||
<a-form-item>
|
||||
<!-- IE Chrome || judgeAgent() !== 'Chrome'-->
|
||||
<a-button type="primary" html-type="submit"
|
||||
:disabled="form.username === '' || form.password === '' || !canOpen.includes(judgeAgent())">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:disabled="
|
||||
form.username === '' ||
|
||||
form.password === '' ||
|
||||
!canOpen.includes(judgeAgent())
|
||||
"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -36,191 +47,196 @@
|
|||
</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, Modal } from 'ant-design-vue'
|
||||
import { dependencies, devDependencies } from '*/package.json'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import Cookies from 'js-cookie'
|
||||
import { Encrypt } from '@/utils/crypto'
|
||||
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 {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
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() {
|
||||
this.form.username = ''
|
||||
this.form.password = ''
|
||||
mounted() {
|
||||
this.form.username = ''
|
||||
this.form.password = ''
|
||||
|
||||
if (!this.canOpen.includes(this.judgeAgent())) {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
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,
|
||||
if (!this.canOpen.includes(this.judgeAgent())) {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: '请使用谷歌或火狐浏览器！',
|
||||
})
|
||||
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>
|
||||
<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;
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: rgba(255, 255, 255, 0.856);
|
||||
text-align: center;
|
||||
}
|
||||
height: 100vh;
|
||||
background: url('~@/assets/login_images/login_background.png');
|
||||
background-size: cover;
|
||||
|
||||
.ant-col {
|
||||
width: 100%;
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
&-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);
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
height: 35px;
|
||||
}
|
||||
&-hello {
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
border-radius: 99px;
|
||||
&-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