290 lines
7.9 KiB
Vue
290 lines
7.9 KiB
Vue
<template>
|
||
<!-- 登录页 -->
|
||
<div class="login">
|
||
<div class="time">{{ postDate }}</div>
|
||
<div class="logindata">
|
||
<div class="logintext">
|
||
<h2>{{ create ? "注册" : "登陆" }}</h2>
|
||
</div>
|
||
<div class="formdata">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item prop="username" label="账号">
|
||
<el-input
|
||
v-model="form.username"
|
||
clearable
|
||
placeholder="请输入账号"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password" label="密码">
|
||
<el-input
|
||
v-model="form.password"
|
||
clearable
|
||
placeholder="请输入密码"
|
||
show-password
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="repassword" label="确认密码" v-if="create">
|
||
<el-input
|
||
v-model="form.repassword"
|
||
clearable
|
||
placeholder="请重复密码"
|
||
show-password
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="tool">
|
||
<div>
|
||
<el-checkbox v-model="checked" @change="remember" v-if="!create"
|
||
>记住密码</el-checkbox
|
||
>
|
||
</div>
|
||
<div>
|
||
<span class="shou" @click="forgetpas" v-if="!create">忘记密码？</span>
|
||
</div>
|
||
</div>
|
||
<div class="butt">
|
||
<el-button type="primary" @click="login">{{
|
||
create ? "注册" : "登陆"
|
||
}}</el-button>
|
||
<el-button class="shou" @click="register">{{
|
||
create ? "返回" : "注册"
|
||
}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { login, autoLogin } from '@/api/login'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
name: 'LoginIndex',
|
||
data () {
|
||
return {
|
||
create: false,
|
||
form: {
|
||
password: '',
|
||
username: '',
|
||
repassword: ''
|
||
},
|
||
checked: false,
|
||
rules: {
|
||
username: [
|
||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||
{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
|
||
],
|
||
password: [
|
||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||
{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
|
||
],
|
||
repassword: [
|
||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||
{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
|
||
]
|
||
},
|
||
postDate: dayjs().format('HH : mm : ss')
|
||
}
|
||
},
|
||
created () {
|
||
setInterval(() => {
|
||
this.postDate = dayjs().format('HH : mm : ss')
|
||
}, 1000)
|
||
|
||
this.loadRememberedCredentials()
|
||
|
||
// 尝试自动登录
|
||
const token = localStorage.getItem('token')
|
||
if (token) {
|
||
this.autoLogin(token)
|
||
}
|
||
},
|
||
methods: {
|
||
loadRememberedCredentials () {
|
||
const rememberedUsername = localStorage.getItem('rememberedUsername')
|
||
const rememberedPassword = localStorage.getItem('rememberedPassword')
|
||
const rememberMeChecked = localStorage.getItem('rememberMeChecked')
|
||
|
||
if (rememberedUsername && rememberedPassword && rememberMeChecked) {
|
||
this.form.username = rememberedUsername
|
||
this.form.password = rememberedPassword
|
||
this.checked = JSON.parse(rememberMeChecked)
|
||
}
|
||
},
|
||
autoLogin (token) {
|
||
autoLogin(token).then(response => {
|
||
console.log(response)
|
||
if (this.$route.path !== '/') {
|
||
this.$router.push('/')
|
||
}
|
||
this.$message({
|
||
message: '自动登录成功',
|
||
type: 'success'
|
||
})
|
||
}).catch(error => {
|
||
console.error('自动登录失败:', error)
|
||
localStorage.removeItem('token')
|
||
this.$message({
|
||
message: '自动登录失败，请重新登录',
|
||
type: 'error'
|
||
})
|
||
})
|
||
},
|
||
login () {
|
||
if (this.form.username === '' || this.form.password === '') {
|
||
this.$message({
|
||
message: '账号或密码不能为空',
|
||
type: 'error'
|
||
})
|
||
return
|
||
}
|
||
// 登录验证
|
||
if (!this.create) {
|
||
login({ ...this.form }).then(response => {
|
||
console.log(response)
|
||
localStorage.setItem('token', response.data.token)
|
||
if (this.checked) {
|
||
localStorage.setItem('rememberedUsername', this.form.username)
|
||
localStorage.setItem('rememberedPassword', this.form.password)
|
||
localStorage.setItem('rememberMeChecked', true)
|
||
} else {
|
||
localStorage.removeItem('rememberedUsername')
|
||
localStorage.removeItem('rememberedPassword')
|
||
localStorage.removeItem('rememberMeChecked')
|
||
}
|
||
if (this.$route.path !== '/') {
|
||
this.$router.push('/')
|
||
}
|
||
this.$message({
|
||
message: '登陆成功',
|
||
type: 'success'
|
||
})
|
||
}).catch(error => {
|
||
console.error('登录失败:', error)
|
||
if (error.response && error.response.status === 401) {
|
||
this.$message({
|
||
message: '账号或密码错误',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
this.$message({
|
||
message: '服务器错误，请稍后再试',
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.$message({
|
||
message: '暂未开放注册,请联系管理员',
|
||
type: 'warning'
|
||
})
|
||
}
|
||
},
|
||
remember () {
|
||
if (this.checked) {
|
||
this.$message({
|
||
message: '将会记住您的登录信息',
|
||
type: 'info'
|
||
})
|
||
} else {
|
||
localStorage.removeItem('rememberedUsername')
|
||
localStorage.removeItem('rememberedPassword')
|
||
localStorage.removeItem('rememberMeChecked')
|
||
this.$message({
|
||
message: '已取消记住密码',
|
||
type: 'info'
|
||
})
|
||
}
|
||
},
|
||
forgetpas () {
|
||
this.$message({
|
||
message: '请联系管理员更改密码',
|
||
type: 'warning'
|
||
})
|
||
},
|
||
register () {
|
||
if (this.create) {
|
||
// 从注册页面返回登录页面时保留内容
|
||
this.create = false
|
||
this.loadRememberedCredentials()
|
||
} else {
|
||
// 从登录页面进入注册页面时清空内容
|
||
this.create = true
|
||
this.form.username = ''
|
||
this.form.password = ''
|
||
this.form.repassword = ''
|
||
this.$refs.form.clearValidate('username')
|
||
this.$refs.form.clearValidate('password')
|
||
this.$refs.form.clearValidate('repassword')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.login {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
position: fixed;
|
||
line-height: 100%;
|
||
padding-top: 150px;
|
||
background: url("../assets/images/sub.jpg");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center center;
|
||
|
||
.time {
|
||
font-size: 30px;
|
||
font-weight: bolder;
|
||
color: white;
|
||
text-shadow: 2px 2px 4px #000000;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.logindata {
|
||
background-color: rgba(214, 214, 214, 0.1);
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),
|
||
/* 右侧阴影 */ -5px 5px 10px rgba(0, 0, 0, 0.1),
|
||
/* 左侧阴影 */ 5px -5px 10px rgba(0, 0, 0, 0.1),
|
||
/* 下部阴影 */ -5px -5px 10px rgba(0, 0, 0, 0.1); /* 上部阴影 */
|
||
width: 400px;
|
||
height: 350px;
|
||
padding: 30px;
|
||
border-radius: 10px;
|
||
transform: translate(-50%);
|
||
margin-left: 70%;
|
||
|
||
.logintext {
|
||
margin-bottom: 20px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: bolder;
|
||
color: white;
|
||
text-shadow: 2px 2px 4px #000000;
|
||
}
|
||
|
||
.tool {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #606266;
|
||
|
||
.shou {
|
||
cursor: pointer;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
.butt {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|