朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 decbf65973acc53803f2f89f9c675dd3a7870746 1 个父辈 ee634b60

update: 

1. 同步适配登录验证码
2. 增加定时用户在线心跳
3. 用户列表锁定状态,禁用状态显示
内嵌 并排对比
正在显示 5 个修改的文件 包含 101 行增加 和 51 行删除
import http from './http.js'
import jsutil from "@/common/js/util";
let baseUrl = '/cloud-user-center/user'
const serviceName = '/cloud-user-center'
// let baseUrl = '/cloud-kako-user-center/user'
// let baseCode = '/cloud-kako-user-center/randCode'
export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };
export const getRandCode = params => { return http.get(`${baseCode}`, params); };
export const getRandCode = params => { return http.get(`/cloud-user-center/anonymous/randCode`, params); };
export const getUserListPage = params => { return http.get(`/user/list`,params) };
... ... @@ -19,10 +20,13 @@ export const editUser = params => { return http.put(`${baseUrl}/edit`,params)};
export const addUser = params => { return http.post(`${baseUrl}/add`,params)};
export const heartBeat = params => { return http.post(`${serviceName}/heartbeat`,params)};
export const setUserRole = params => { return http.put(`${baseUrl}/roleset`,params)};
export const resetToken = params => { return http.put(`${baseUrl}/resetToken`,params)};
export const loginedUserInfo = () => {
let session_user_info = sessionStorage.getItem('user');
if (session_user_info && jsutil.checkNull(session_user_info)){
... ...
... ... @@ -19,6 +19,11 @@ var axois_init = {
return res;
},
error => {
// 抓取报错信息
let errmsg = '';
if (error.response.data.message){
errmsg += error.response.data.message
}
// 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳
// 直接丢sessionStorage
if (!sessionStorage.getItem("token")) {
... ... @@ -33,7 +38,7 @@ var axois_init = {
if (error.response.status === 401) {
message({
// 饿了么的消息弹窗组件
message: '授权超时，或访问未授权，请重新登录',
message: errmsg + '授权超时，或访问未授权，请重新登录;',
type: "error"
});
}
... ... @@ -80,7 +85,7 @@ var axois_init = {
}
// 返回 response 里的错误信息
return Promise.reject(errorInfo);
return Promise.reject(errorInfo + errmsg);
}
);
},
... ...
... ... @@ -62,7 +62,7 @@
<script>
import rt from '../routes'
import { editPass,resetToken,loginedUserInfo} from '../api/user';
import { editPass,resetToken,loginedUserInfo,heartBeat} from '../api/user';
import ElFormItem from "element-ui/packages/form/src/form-item";
import TabMenu from "@/components/TabMenu"
import NavMenu from "@/components/NavMenu"
... ... @@ -283,6 +283,11 @@
}
})
},
heartBeatAPI:function () {
heartBeat().then(response => {
});
}
},
computed: {
... ... @@ -304,6 +309,9 @@
setInterval(() => {
this.checkUpdate();
}, 30000);
setInterval(() => {
this.heartBeatAPI();
}, 60000);
this.$nextTick(function(){
this.initUserInfo();
// this.rowDrop(); //行拖拽效果
... ...
... ... @@ -8,9 +8,16 @@
<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="checkPass">-->
<!-- <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></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: 125px; 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>
... ... @@ -43,15 +50,18 @@
export default {
data() {
return {
vedioCanPlay: true,
fixStyle: '',
logining: false,
ruleForm2: {
verifyImg: "",
vedioCanPlay: true,
fixStyle: '',
logining: false,
ruleForm2: {
account: '',
// checkPass: 'zzairport@kako2020'
checkPass: ''
},
rules2: {
checkPass: '',
verify: '',
verifyToken: ''
},
rules2: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
//{ validator: validaePass }
... ... @@ -59,10 +69,13 @@
checkPass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
//{ validator: validaePass2 }
],
checkVerify: [
{ required: false, message: '请输入验证码', trigger: 'blur' }
]
},
checked: true,
userMenus: []
},
checked: true,
userMenus: []
};
},
methods: {
... ... @@ -105,18 +118,20 @@
// 本地存储用户目录 ，防刷新目录丢失用
sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
},
randCode: function(){
getRandCode().then((res) =>{
}).catch({
});
},
keyDown(e) {
if(e.keyCode===13) { //用户点击了ctrl+enter触发
this.handleSubmit2()
}
},
getVerifyCode: function(){
getRandCode().then((res) =>{
let status = res.status;
this.ruleForm2.verifyToken = res.data.jwtToken;
this.verifyImg = res.data.data.verifyImg;
}).catch({
});
},
handleSubmit2: function (ev) {
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
... ... @@ -124,7 +139,12 @@
//_this.$router.replace('/table');
this.logining = true;
//NProgress.start();
var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
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();
... ... @@ -133,11 +153,12 @@
let token = authentication.token;
let loginUserMenus = res.data.loginUserMenus;
if (status !== 200) {
let msg = "登录错误";
this.$message({
message: msg,
type: "error"
});
this.getVerifyCode();
let msg = "登录错误";
this.$message({
message: msg,
type: "error"
});
} else if (token) {
sessionStorage.setItem('user', JSON.stringify(authentication));
sessionStorage.setItem('token','Bearer '+ token);
... ... @@ -147,20 +168,17 @@
//处理用户menu
_this.userMenus = loginUserMenus.list;
let sysMenus = _this.$router.options.routes;
_this.handleMenuList(_this.$router.options.routes,_this.userMenus);
// console.log("user:");
// console.log(_this.$router.options.routes);
_this.$router.push({path: '/main'});
}
}).catch(error => {
this.$message({
message: error.toString()+"-登录验证失败",
type: "error"
});
this.logining = false;
this.$message({
message: error.toString()+"-登录验证失败;",
type: "error"
});
this.getVerifyCode();
}).finally(()=>{
this.logining = false;
});
} else {
return false;
... ... @@ -168,7 +186,7 @@
});
}
},
mounted:function () {
mounted:function () {
this.$store.commit('set_user_menu', []);
this.$store.commit('set_user_info', {
userId: 0,
... ... @@ -213,8 +231,10 @@
_this.handleSubmit2();
}
};
// this.randCode();
}
},
created(){
this.getVerifyCode()
},
}
</script>
... ...
... ... @@ -38,19 +38,32 @@
</el-table-column>
<el-table-column prop="realname" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="mobilephone" label="电话" width="150">
</el-table-column>
<el-table-column prop="creattime" label="创建时间" width="220" sortable>
</el-table-column>
<el-table-column prop="updatetime" label="更新时间" width="220" sortable>
</el-table-column>
<!-- <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="mobilephone" label="电话" width="150">-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="address" label="地址" min-width="180">-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="email" label="Email" min-width="180">-->
<!-- </el-table-column>-->
<el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.state">启用</el-tag>
<el-tag type="danger" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="userStatus" label="状态" width="100">
<template slot-scope="scope">
<el-tag type="danger" v-if="scope.row.userStatus ===0">锁定</el-tag>
<el-tag type="success" v-else-if="scope.row.userStatus ===1">在线</el-tag>
<el-tag type="info" v-else-if="scope.row.userStatus ===2">离线</el-tag>
<el-tag type="warning" v-else-if="scope.row.userStatus ===3">过期</el-tag>
<el-tag type="warning" v-else>未知</el-tag>
</template>
</el-table-column>
<el-table-column prop="creattime" label="创建时间" width="220" sortable>
</el-table-column>
<el-table-column prop="updatetime" label="更新时间" width="220" sortable>
</el-table-column>
<el-table-column label="操作" align="center" width="250" fixed="right">
<template slot-scope="scope">
... ...