|
|
|
<template>
|
|
|
|
<div class="backgroud">
|
|
|
|
<el-row>
|
|
|
|
<el-col :xs="{span: 22, offset: 1}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}" :lg="{span: 6, offset: 9}" :xl="{span: 6, offset: 9}" :style="fixStyle" id="loginCol">
|
|
|
|
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
|
|
|
|
<h3 class="title">系统登录</h3>
|
|
|
|
<el-form-item prop="account">
|
|
|
|
<el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="checkPass">
|
|
|
|
<el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keydown.enter.native="keyDown" show-password></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="verify">
|
|
|
|
<el-input type="text" v-model="ruleForm2.verify" placeholder="请在2分钟内输入下方图片中的答案" @keyup.enter.native="handleSubmit2"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<img
|
|
|
|
style="width: 98%; height: 60px"
|
|
|
|
:src="verifyImg"
|
|
|
|
@click="getVerifyCode"
|
|
|
|
>
|
|
|
|
</el-form-item>
|
|
|
|
<el-checkbox v-model="checked" checked class="remeberme">记住密码</el-checkbox>
|
|
|
|
<el-form-item style="width:100%;">
|
|
|
|
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
|
|
|
|
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {getRandCode} from "@/api/user";
|
|
|
|
import {mapActions} from 'vuex'
|
|
|
|
import http from "@/api/http";
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'App',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
verifyImg: "",
|
|
|
|
vedioCanPlay: false,
|
|
|
|
fixStyle: '',
|
|
|
|
logining: false,
|
|
|
|
ruleForm2: {
|
|
|
|
account: '',
|
|
|
|
// checkPass: 'zzairport@kako2020'
|
|
|
|
checkPass: '',
|
|
|
|
verify: '',
|
|
|
|
verifyToken: ''
|
|
|
|
},
|
|
|
|
rules2: {
|
|
|
|
account: [
|
|
|
|
{ required: true, message: '请输入账号', trigger: 'blur' },
|
|
|
|
//{ validator: validaePass }
|
|
|
|
],
|
|
|
|
checkPass: [
|
|
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
|
//{ validator: validaePass2 }
|
|
|
|
],
|
|
|
|
checkVerify: [
|
|
|
|
{ required: false, message: '请输入验证码', trigger: 'blur' }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
checked: false,
|
|
|
|
userMenus: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions( // 语法糖
|
|
|
|
['setUserInfoStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
|
|
|
|
),
|
|
|
|
getVerifyCode: function(){
|
|
|
|
getRandCode().then((res) =>{
|
|
|
|
let status = res.status;
|
|
|
|
this.ruleForm2.verifyToken = res.data.jwtToken;
|
|
|
|
this.verifyImg = res.data.data.verifyImg;
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message({
|
|
|
|
message: "验证码获取失败:"+error.toString(),
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
fixLoginHeight:function (){
|
|
|
|
const windowHeight = document.body.clientHeight
|
|
|
|
const colElement = document.getElementById("loginCol")
|
|
|
|
if (colElement) {
|
|
|
|
const col_height = colElement.offsetHeight; // 获取元素的高度
|
|
|
|
this.fixStyle = {
|
|
|
|
'margin-top': (windowHeight - col_height) / 2 + 'px',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
handleMenuList : function (router,menu) {
|
|
|
|
var _this = this;
|
|
|
|
var routerName = "";
|
|
|
|
var routerTemp = router.concat();
|
|
|
|
|
|
|
|
routerTemp.forEach(function (v_router,v_index,v_arr) {
|
|
|
|
routerName = v_router.name;
|
|
|
|
|
|
|
|
//查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
|
|
|
|
let result = menu.find(item => {
|
|
|
|
return item.name === routerName;
|
|
|
|
});
|
|
|
|
|
|
|
|
//匹配到继续判断是否子元素,有子元素继续递归
|
|
|
|
if (result) {
|
|
|
|
if (v_router.children && v_router.children.length>0) {
|
|
|
|
_this.handleMenuList(v_router.children, result.children);
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
//没有则可以移除
|
|
|
|
let deletRouter = router.findIndex(itm => itm.name === routerName );
|
|
|
|
router.splice(deletRouter,1);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// console.log("longined router:");
|
|
|
|
// console.log(routerName);
|
|
|
|
// console.log(_this.$router.options.routes);
|
|
|
|
// 本地存储用户目录 ，防刷新目录丢失用
|
|
|
|
sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
|
|
|
|
},
|
|
|
|
handleSubmit2: function (ev) {
|
|
|
|
var _this = this;
|
|
|
|
this.$refs.ruleForm2.validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
//_this.$router.replace('/table');
|
|
|
|
this.logining = true;
|
|
|
|
//NProgress.start();
|
|
|
|
var loginParams = {
|
|
|
|
username: this.ruleForm2.account,
|
|
|
|
password: this.ruleForm2.checkPass,
|
|
|
|
verify: this.ruleForm2.verify,
|
|
|
|
verifyToken:this.ruleForm2.verifyToken
|
|
|
|
};
|
|
|
|
http.login(loginParams).then(res => {
|
|
|
|
this.logining = false;
|
|
|
|
//NProgress.done();
|
|
|
|
let status = res.status;
|
|
|
|
let authentication = res.data.authentication;
|
|
|
|
let token = authentication.token;
|
|
|
|
let loginUserMenus = res.data.loginUserMenus;
|
|
|
|
if (status !== 200) {
|
|
|
|
this.getVerifyCode();
|
|
|
|
let msg = "登录错误";
|
|
|
|
this.$message({
|
|
|
|
message: msg,
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
} else if (token) {
|
|
|
|
sessionStorage.setItem('user', JSON.stringify(authentication));
|
|
|
|
sessionStorage.setItem('token','Bearer '+ token);
|
|
|
|
this.setUserInfoStore(authentication);
|
|
|
|
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
|
|
|
|
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
|
|
|
|
//处理用户menu
|
|
|
|
_this.userMenus = loginUserMenus.list;
|
|
|
|
let sysMenus = _this.$router.options.routes;
|
|
|
|
_this.handleMenuList(_this.$router.options.routes,_this.userMenus);
|
|
|
|
_this.$router.push({path: '/main'});
|
|
|
|
}
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message({
|
|
|
|
message: error.toString()+"-登录验证失败;",
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
this.getVerifyCode();
|
|
|
|
}).finally(()=>{
|
|
|
|
this.logining = false;
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted:function (){
|
|
|
|
this.$store.commit('set_user_menu', []);
|
|
|
|
this.$store.commit('set_user_info', {
|
|
|
|
userId: 0,
|
|
|
|
username: '',
|
|
|
|
companyId: 0,
|
|
|
|
companyName: '',
|
|
|
|
realname: '',
|
|
|
|
userface: '',
|
|
|
|
companyInfo:{}
|
|
|
|
});
|
|
|
|
this.$nextTick(() => {
|
|
|
|
window.onresize = () => {
|
|
|
|
this.fixLoginHeight()
|
|
|
|
}
|
|
|
|
window.onresize();
|
|
|
|
})
|
|
|
|
|
|
|
|
document.onkeydown = function (e) {
|
|
|
|
let key = window.event.keyCode;
|
|
|
|
if (key == 13) {
|
|
|
|
_this.handleSubmit2();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
created(){
|
|
|
|
this.getVerifyCode()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#loginForm{
|
|
|
|
filter:alpha(Opacity=80);
|
|
|
|
-moz-opacity:0.8;
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
.backgroud {
|
|
|
|
width: 100%;
|
|
|
|
height: 100vh; /* 设置为视口高度 */
|
|
|
|
z-index: 1;
|
|
|
|
position: absolute;
|
|
|
|
background:url("/static/login/login_backgroud.jpg") rgba(0, 0, 0, 0.4);
|
|
|
|
}
|
|
|
|
.login-container {
|
|
|
|
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
|
|
|
|
-webkit-border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
-moz-border-radius: 5px;
|
|
|
|
background-clip: padding-box;
|
|
|
|
padding: 35px 35px 15px 35px;
|
|
|
|
background: #fff;
|
|
|
|
border: 1px solid #eaeaea;
|
|
|
|
box-shadow: 0 0 25px #cac6c6;
|
|
|
|
.title {
|
|
|
|
margin: 0px auto 40px auto;
|
|
|
|
text-align: center;
|
|
|
|
color: #505458;
|
|
|
|
}
|
|
|
|
.remember {
|
|
|
|
margin: 0px 0px 35px 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
