Login.vue
3.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div class="login" id="login">
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<span class="login100-form-title p-b-26">WVP视频平台</span>
<span class="login100-form-title p-b-48">
<i class="fa fa-video-camera"></i>
</span>
<div class="wrap-input100 validate-input" data-validate = "Valid email is: a@b.c">
<input :class="'input100 ' + (username==''?'':'has-val')" type="text" v-model="username" name="username">
<span class="focus-input100" data-placeholder="用户名"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i :class="'fa ' + (!showPassword?'fa-eye':'fa-eye-slash')" @click="showPassword = !showPassword"></i>
</span>
<input :class="'input100 ' + (password==''?'':'has-val')" :type="(!showPassword?'password':'text')" v-model="password" name="password">
<span class="focus-input100" data-placeholder="密码"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn" :class="{'login-loading': isLoging}" v-loading="isLoging" element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" @click="login">登录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import crypto from 'crypto'
export default {
name: 'Login',
data(){
return {
isLoging: false,
showPassword: false,
loginLoading: false,
username: '',
password: ''
}
},
created(){
var that = this;
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
that.login();
}
}
},
methods:{
//登录逻辑
login(){
if(this.username!='' && this.password!=''){
this.toLogin();
}
},
//登录请求
toLogin(){
//一般要跟后端了解密码的加密规则
//这里例子用的哈希算法来自./js/sha1.min.js
//需要想后端发送的登录参数
let loginParam = {
username: this.username,
password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
}
var that = this;
//设置在登录状态
this.isLoging = true;
this.$axios({
method: 'get',
url:"/api/user/login",
params: loginParam
}).then(function (res) {
console.log(JSON.stringify(res));
if (res.data.code == 0 && res.data.msg == "success") {
that.$cookies.set("session", {"username": that.username}) ;
//登录成功后
that.cancelEnterkeyDefaultAction();
that.$router.push('/');
}else{
that.isLoging = false;
that.$message({
showClose: true,
message: '登录失败，用户名或密码错误',
type: 'error'
});
}
}).catch(function (error) {
that.$message.error(error.response.data.msg);
that.isLoging = false;
});
},
setCookie: function (cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
console.info(cname + "=" + cvalue + "; " + expires);
document.cookie = cname + "=" + cvalue + "; " + expires;
console.info(document.cookie);
},
cancelEnterkeyDefaultAction: function() {
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
return false;
}
}
}
}
}
</script>