朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 895e229302cd43f3d1231d85c8fc599363c5320f 1 个父辈 8bbac6b1

登录增加验证码验证

内嵌 并排对比
正在显示 2 个修改的文件 包含 58 行增加 和 36 行删除
1 import http from './http.js' 1 import http from './http.js'
2 // let baseUrl = '/cloud-user-center/user' 2 // let baseUrl = '/cloud-user-center/user'
3 let baseUrl = '/cloud-kako-user-center/user' 3 let baseUrl = '/cloud-kako-user-center/user'
4 -let baseCode = '/cloud-kako-user-center/randCode'  
5 -export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };  
6 4
7 -export const getRandCode = params => { return http.get(`${baseCode}`, params); }; 5 +export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };
8 6
9 export const getUserListPage = params => { return http.get(`/user/list`,params) }; 7 export const getUserListPage = params => { return http.get(`/user/list`,params) };
10 8
@@ -21,3 +19,6 @@ export const addUser = params => { return http.post(`${baseUrl}/add`,params)}; @@ -21,3 +19,6 @@ export const addUser = params => { return http.post(`${baseUrl}/add`,params)};
21 export const setUserRole = params => { return http.put(`${baseUrl}/roleset`,params)}; 19 export const setUserRole = params => { return http.put(`${baseUrl}/roleset`,params)};
22 20
23 export const resetToken = params => { return http.put(`${baseUrl}/resetToken`,params)}; 21 export const resetToken = params => { return http.put(`${baseUrl}/resetToken`,params)};
  22 +
  23 +export const getRandCode = params => { return http.post('/cloud-kako-user-center/anonymous/randCode', params); };
  24 +
@@ -6,7 +6,17 @@ @@ -6,7 +6,17 @@
6 <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input> 6 <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
7 </el-form-item> 7 </el-form-item>
8 <el-form-item prop="checkPass"> 8 <el-form-item prop="checkPass">
9 - <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input> 9 + <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码"></el-input>
  10 + </el-form-item>
  11 + <el-form-item prop="verify">
  12 + <el-input type="text" v-model="ruleForm2.verify" placeholder="请输入下方图片显示的验证码" @keyup.enter.native="handleSubmit2"></el-input>
  13 + </el-form-item>
  14 + <el-form-item>
  15 + <img
  16 + style="width: 125px; height: 60px"
  17 + :src="verifyImg"
  18 + @click="getVerifyCode"
  19 + >
10 </el-form-item> 20 </el-form-item>
11 <!-- <el-form-item prop="checkPass">--> 21 <!-- <el-form-item prop="checkPass">-->
12 <!-- <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>--> 22 <!-- <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>-->
@@ -42,26 +52,31 @@ @@ -42,26 +52,31 @@
42 export default { 52 export default {
43 data() { 53 data() {
44 return { 54 return {
45 - vedioCanPlay: true,  
46 - fixStyle: '',  
47 - logining: false,  
48 - ruleForm2: { 55 + verifyImg: "",
  56 + vedioCanPlay: true,
  57 + fixStyle: '',
  58 + logining: false,
  59 + ruleForm2: {
49 account: '', 60 account: '',
50 - checkPass: ''  
51 - // checkPass: 'vmvnv1v2VV'  
52 - },  
53 - rules2: {  
54 - account: [  
55 - { required: true, message: '请输入账号', trigger: 'blur' },  
56 - //{ validator: validaePass }  
57 - ],  
58 - checkPass: [  
59 - { required: true, message: '请输入密码', trigger: 'blur' },  
60 - //{ validator: validaePass2 }  
61 - ] 61 + checkPass: '',
  62 + verify: '',
  63 + verifyToken: ''
  64 + },
  65 + rules2: {
  66 + account: [
  67 + { required: true, message: '请输入账号', trigger: 'blur' },
  68 + //{ validator: validaePass }
  69 + ],
  70 + checkPass: [
  71 + { required: true, message: '请输入密码', trigger: 'blur' },
  72 + //{ validator: validaePass2 }
  73 + ],
  74 + checkVerify: [
  75 + { required: true, message: '请输入验证码', trigger: 'blur' }
  76 + ]
62 }, 77 },
63 - checked: true,  
64 - userMenus: [] 78 + checked: true,
  79 + userMenus: []
65 }; 80 };
66 }, 81 },
67 methods: { 82 methods: {
@@ -71,7 +86,7 @@ @@ -71,7 +86,7 @@
71 handleReset2() { 86 handleReset2() {
72 this.$refs.ruleForm2.resetFields(); 87 this.$refs.ruleForm2.resetFields();
73 }, 88 },
74 - handleMenuList : function (router,menu) { 89 + handleMenuList : function (router,menu) {
75 var _this = this; 90 var _this = this;
76 var routerName = ""; 91 var routerName = "";
77 var routerTemp = router.concat(); 92 var routerTemp = router.concat();
@@ -101,21 +116,24 @@ @@ -101,21 +116,24 @@
101 // 本地存储用户目录 ，防刷新目录丢失用 116 // 本地存储用户目录 ，防刷新目录丢失用
102 sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes)); 117 sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
103 }, 118 },
104 - randCode: function(){  
105 - getRandCode().then((res) =>{  
106 119
107 - }).catch({ 120 + getVerifyCode: function(){
  121 + getRandCode().then((res) =>{
  122 + let status = res.status;
  123 + this.ruleForm2.verifyToken = res.data.jwtToken;
  124 + this.verifyImg = res.data.data.verifyImg;
  125 + }).catch({
108 126
109 - });  
110 - },  
111 - handleSubmit2: function (ev) { 127 + });
  128 + },
  129 + handleSubmit2: function (ev) {
112 var _this = this; 130 var _this = this;
113 this.$refs.ruleForm2.validate((valid) => { 131 this.$refs.ruleForm2.validate((valid) => {
114 if (valid) { 132 if (valid) {
115 //_this.$router.replace('/table'); 133 //_this.$router.replace('/table');
116 this.logining = true; 134 this.logining = true;
117 //NProgress.start(); 135 //NProgress.start();
118 - var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass}; 136 + var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass, verify: this.ruleForm2.verify,verifyToken:this.ruleForm2.verifyToken};
119 http.login(loginParams).then(res => { 137 http.login(loginParams).then(res => {
120 this.logining = false; 138 this.logining = false;
121 //NProgress.done(); 139 //NProgress.done();
@@ -163,8 +181,8 @@ @@ -163,8 +181,8 @@
163 }); 181 });
164 } 182 }
165 }, 183 },
166 - mounted:function () {  
167 - window.onresize = () => { 184 + mounted:function () {
  185 + window.onresize = () => {
168 const windowWidth = document.body.clientWidth 186 const windowWidth = document.body.clientWidth
169 const windowHeight = document.body.clientHeight 187 const windowHeight = document.body.clientHeight
170 const windowAspectRatio = windowHeight / windowWidth 188 const windowAspectRatio = windowHeight / windowWidth
@@ -189,10 +207,13 @@ @@ -189,10 +207,13 @@
189 'margin-bottom': 'initial' 207 'margin-bottom': 'initial'
190 } 208 }
191 } 209 }
192 - }  
193 - window.onresize();  
194 - // this.randCode();  
195 - } 210 + },
  211 + window.onresize();
  212 + // this.randCode();
  213 + },
  214 + created(){
  215 + this.getVerifyCode()
  216 + }
196 } 217 }
197 218
198 </script> 219 </script>