114 lines
4.4 KiB
Vue
114 lines
4.4 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="row justify-content-md-center">
|
||
<div class="col-md-12 col-lg-4">
|
||
<div class="card login-box-container">
|
||
<div class="card-body">
|
||
<div class="authent-logo">
|
||
<img src="../../assets/images/logo@2x.png" alt="">
|
||
</div>
|
||
<div class="authent-text">
|
||
<p>欢迎访问{{ systemname }}!</p>
|
||
<p>请登录你的账户.</p>
|
||
</div>
|
||
|
||
<form>
|
||
<div class="mb-3">
|
||
<div class="form-floating">
|
||
<input v-model="formdata.username" type="text" class="form-control"
|
||
id="floatingInput" placeholder="username">
|
||
<label for="floatingInput">用户名</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="form-floating">
|
||
<input v-model="formdata.password" type="password" class="form-control"
|
||
id="floatingPassword" placeholder="Password">
|
||
<label for="floatingPassword">密码</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||
<label class="form-check-label" for="exampleCheck1">记住我</label>
|
||
</div>
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-info m-b-xs" @click="login">登录</button>
|
||
<button class="btn btn-primary">三方登录</button>
|
||
</div>
|
||
</form>
|
||
<div class="authent-reg">
|
||
<p>没有账户？<router-link to="register">点击创建</router-link></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import md5 from 'blueimp-md5';
|
||
import { mapGetters } from 'vuex';
|
||
import auth from '@/utils/auth';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
formdata: {
|
||
username: '',
|
||
password: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 用户登录
|
||
*/
|
||
async login() {
|
||
//记录原始密码，用于修改MD5后还原原始文本
|
||
const passwordOld = this.formdata.password
|
||
this.formdata.password = md5(passwordOld)
|
||
try {
|
||
const res = await this.$api.login(this.formdata)
|
||
let msg = ''
|
||
let type = 'danger'
|
||
switch (res.code) {
|
||
case 2000: msg = '登录成功'; break
|
||
case 2001: msg = '用户名或密码错误'; break
|
||
case 2002: msg = '账户被禁用'; break
|
||
case 2004: msg = '用户不存在'; break
|
||
default: msg = '登录失败'; break
|
||
}
|
||
if (res.code == 2000) {
|
||
//储存登录凭证
|
||
auth.setAccessToken(res.data.token)
|
||
auth.setRefreshToken(res.data.refreshToken)
|
||
auth.setUserId(res.data.userInfo.id)
|
||
this.$store.commit('userinfo/SET_USERINFO', res.data.userInfo)
|
||
type = 'success'
|
||
this.$alert(msg, type)
|
||
this.$router.push('/layout/index')
|
||
}else{
|
||
this.$alert(msg, type)
|
||
}
|
||
|
||
} catch (e) {
|
||
console.log(e)
|
||
this.$alert('未知错误', 'error')
|
||
} finally {
|
||
//还原密码文本
|
||
this.formdata.password = passwordOld
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
/**
|
||
* 初始化系统配置
|
||
*/
|
||
...mapGetters('config', ['systemname'])
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped></style> |