change login by username
This commit is contained in:
parent
d06d476b50
commit
0094f44910
8 changed files with 109 additions and 93 deletions
|
@ -1,12 +1,12 @@
|
|||
import fetch from 'utils/fetch';
|
||||
|
||||
export function loginByEmail(email, password) {
|
||||
export function loginByUsername(username, password) {
|
||||
const data = {
|
||||
email,
|
||||
username,
|
||||
password
|
||||
};
|
||||
return fetch({
|
||||
url: '/login/loginbyemail',
|
||||
url: '/login/login',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,25 +1,23 @@
|
|||
import Mock from 'mockjs';
|
||||
import loginAPI from './login';
|
||||
import articleAPI from './article';
|
||||
import article_tableAPI from './article_table';
|
||||
import remoteSearchAPI from './remoteSearch';
|
||||
|
||||
import Mock from 'mockjs'
|
||||
import loginAPI from './login'
|
||||
import articleAPI from './article'
|
||||
import article_tableAPI from './article_table'
|
||||
import remoteSearchAPI from './remoteSearch'
|
||||
|
||||
// 登录相关
|
||||
Mock.mock(/\/login\/loginbyemail/, 'post', loginAPI.loginByEmail);
|
||||
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout);
|
||||
Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
|
||||
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
|
||||
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
|
||||
|
||||
// // 文章相关
|
||||
Mock.mock(/\/article\/list/, 'get', articleAPI.getList);
|
||||
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle);
|
||||
// 文章相关
|
||||
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
|
||||
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
|
||||
|
||||
// // table example相关
|
||||
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList);
|
||||
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv);
|
||||
// table example相关
|
||||
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
|
||||
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
|
||||
|
||||
// // 搜索相关
|
||||
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser);
|
||||
// 搜索相关
|
||||
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
|
||||
|
||||
|
||||
export default Mock;
|
||||
export default Mock
|
||||
|
|
|
@ -25,9 +25,9 @@ const userMap = {
|
|||
}
|
||||
|
||||
export default {
|
||||
loginByEmail: config => {
|
||||
const { email } = JSON.parse(config.body);
|
||||
return userMap[email.split('@')[0]];
|
||||
loginByUsername: config => {
|
||||
const { username } = JSON.parse(config.body);
|
||||
return userMap[username];
|
||||
},
|
||||
getInfo: config => {
|
||||
const { token } = param2Obj(config.url);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { loginByEmail, logout, getInfo } from 'api/login';
|
||||
import { loginByUsername, logout, getInfo } from 'api/login';
|
||||
import { getToken, setToken, removeToken } from 'utils/auth';
|
||||
|
||||
const user = {
|
||||
|
@ -50,11 +50,11 @@ const user = {
|
|||
},
|
||||
|
||||
actions: {
|
||||
// 邮箱登录
|
||||
LoginByEmail({ commit }, userInfo) {
|
||||
const email = userInfo.email.trim();
|
||||
// 用户名登录
|
||||
LoginByUsername({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim();
|
||||
return new Promise((resolve, reject) => {
|
||||
loginByEmail(email, userInfo.password).then(response => {
|
||||
loginByUsername(username, userInfo.password).then(response => {
|
||||
const data = response.data;
|
||||
setToken(response.data.token);
|
||||
commit('SET_TOKEN', data.token);
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
*/
|
||||
|
||||
/* 是否是公司邮箱*/
|
||||
export function isWscnEmail(str) {
|
||||
const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
|
||||
return reg.test(str.trim());
|
||||
export function isvalidUsername(str) {
|
||||
const valid_map = ['admin', 'editor']
|
||||
return valid_map.indexOf(str.trim()) >= 0;
|
||||
}
|
||||
|
||||
/* 合法uri*/
|
||||
|
|
|
@ -21,7 +21,6 @@
|
|||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'email',
|
||||
'introduction',
|
||||
'roles'
|
||||
])
|
||||
|
|
|
@ -1,115 +1,123 @@
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
|
||||
class="card-box login-form">
|
||||
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<h3 class="title">系统登录</h3>
|
||||
<el-form-item prop="email">
|
||||
<span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
|
||||
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<icon-svg icon-class="yonghuming" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
|
||||
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
placeholder="密码"></el-input>
|
||||
<span class="svg-container">
|
||||
<icon-svg icon-class="mima" />
|
||||
</span>
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
placeholder="密码" />
|
||||
<span class='show-pwd' @click='showPwd'><icon-svg icon-class="yanjing" /></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
|
||||
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
|
||||
|
||||
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
|
||||
|
||||
<div class='tips'>账号:admin 密码随便填</div>
|
||||
<div class='tips'>账号:editor 密码随便填</div>
|
||||
</el-form>
|
||||
|
||||
<el-dialog title="第三方验证" :visible.sync="showDialog">
|
||||
邮箱登录成功,请选择第三方验证
|
||||
<social-sign></social-sign>
|
||||
<social-sign />
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isWscnEmail } from 'utils/validate';
|
||||
import socialSign from './socialsignin';
|
||||
import { isvalidUsername } from 'utils/validate'
|
||||
import socialSign from './socialsignin'
|
||||
|
||||
export default {
|
||||
components: { socialSign },
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateEmail = (rule, value, callback) => {
|
||||
if (!isWscnEmail(value)) {
|
||||
callback(new Error('请输入正确的合法邮箱'));
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!isvalidUsername(value)) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
} else {
|
||||
callback();
|
||||
callback()
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('密码不能小于6位'));
|
||||
callback(new Error('密码不能小于6位'))
|
||||
} else {
|
||||
callback();
|
||||
callback()
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
email: 'admin@wallstreetcn.com',
|
||||
password: ''
|
||||
username: 'admin',
|
||||
password: '1111111'
|
||||
},
|
||||
loginRules: {
|
||||
email: [
|
||||
{ required: true, trigger: 'blur', validator: validateEmail }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', validator: validatePass }
|
||||
]
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
},
|
||||
pwdType: 'password',
|
||||
loading: false,
|
||||
showDialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
|
||||
this.loading = false;
|
||||
this.$router.push({ path: '/' });
|
||||
// this.showDialog = true;
|
||||
this.loading = true
|
||||
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({ path: '/' })
|
||||
// this.showDialog = true
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
afterQRScan() {
|
||||
// const hash = window.location.hash.slice(1);
|
||||
// const hashObj = getQueryObject(hash);
|
||||
// const originUrl = window.location.origin;
|
||||
// history.replaceState({}, '', originUrl);
|
||||
// const hash = window.location.hash.slice(1)
|
||||
// const hashObj = getQueryObject(hash)
|
||||
// const originUrl = window.location.origin
|
||||
// history.replaceState({}, '', originUrl)
|
||||
// const codeMap = {
|
||||
// wechat: 'code',
|
||||
// tencent: 'code'
|
||||
// };
|
||||
// const codeName = hashObj[codeMap[this.auth_type]];
|
||||
// }
|
||||
// const codeName = hashObj[codeMap[this.auth_type]]
|
||||
// if (!codeName) {
|
||||
// alert('第三方登录失败');
|
||||
// alert('第三方登录失败')
|
||||
// } else {
|
||||
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
|
||||
// this.$router.push({ path: '/' });
|
||||
// });
|
||||
// this.$router.push({ path: '/' })
|
||||
// })
|
||||
// }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// window.addEventListener('hashchange', this.afterQRScan);
|
||||
// window.addEventListener('hashchange', this.afterQRScan)
|
||||
},
|
||||
destroyed() {
|
||||
// window.removeEventListener('hashchange', this.afterQRScan);
|
||||
// window.removeEventListener('hashchange', this.afterQRScan)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -119,7 +127,7 @@
|
|||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
|
@ -147,6 +155,12 @@
|
|||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: #889aa4;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
&_login{
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 26px;
|
||||
|
@ -170,8 +184,13 @@
|
|||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
.forget-pwd {
|
||||
color: #fff;
|
||||
.show-pwd{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: #889aa4;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue