Skip to content

V
vue-passport
提交 7690848e authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

升级新版用户登录

上级 3ef02d2b
显示空白字符变更
内嵌 并排
正在显示 包含 134 行增加 和 182 行删除
examples/App.vue
浏览文件 @ 7690848e
......@@ -57,7 +57,6 @@ export default {
})
},
onReady(isLogin, user) {
console.log(isLogin, user)
if (isLogin) {
console.log(user)
}
......
package.json
浏览文件 @ 7690848e
{
"name": "@ezijing/vue-passport",
"version": "0.1.6",
"version": "1.0.0",
"private": false,
"description": "基于Vue Element-UI的登录注册",
"scripts": {
......
src/Index.vue
浏览文件 @ 7690848e
......@@ -74,16 +74,8 @@ export default {
}
if (this.openType === 1) {
result = {
account: Object.assign(
{},
login.account,
this.options.login ? this.options.login.account : {}
),
phone: Object.assign(
{},
login.phone,
this.options.login ? this.options.login.phone : {}
)
account: Object.assign({}, login.account, this.options.login ? this.options.login.account : {}),
phone: Object.assign({}, login.phone, this.options.login ? this.options.login.phone : {})
}
}
if (this.openType === 2) {
......@@ -110,18 +102,18 @@ export default {
},
// 登出
logout() {
const options = Object.assign(
{},
defaultProps.logout,
this.options.logout
)
const options = Object.assign({}, defaultProps.logout, this.options.logout)
this.handleRequest(options)
},
// 检测登录状态
checkLoginStatus(callback) {
this.getUser()
.then(response => {
callback && callback(true, response.data)
.then(({ code, data }) => {
if (code) {
callback && callback(false)
} else {
callback && callback(true, data)
}
})
.catch(() => {
callback && callback(false)
......@@ -129,17 +121,21 @@ export default {
},
// 获取用户信息
getUser() {
const options = Object.assign({}, defaultProps.user, this.options.user)
const options = Object.assign(defaultProps.user, this.options.user)
return this.handleRequest(options)
},
// 接口请求
handleRequest(options) {
const { url, headers, data = {}, onSuccess, onError } = options
return axios
.post(url, data, { headers })
const { method = 'get', url, headers, data = {}, onSuccess, onError } = options
return axios({
method,
url,
data,
headers
})
.then(response => {
onSuccess && onSuccess(response.data)
return Promise.resolve(response)
return Promise.resolve(response.data)
})
.catch(error => {
if (error.response) {
......@@ -150,8 +146,12 @@ export default {
},
ready() {
this.getUser()
.then(response => {
this.$emit('ready', true, response.data)
.then(({ code, data }) => {
if (code) {
this.$emit('ready', false)
} else {
this.$emit('ready', true, data)
}
})
.catch(() => {
this.$emit('ready', false)
......
src/Password.vue
浏览文件 @ 7690848e
......@@ -7,12 +7,12 @@
<div class="ezj-form" v-else>
<h1 class="ezj-title">找回密码</h1>
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="contact" :error="contactError">
<el-input v-model="ruleForm.contact" placeholder="请输入手机号码或邮箱">
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="请输入手机号码或邮箱">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" :error="codeError">
<el-form-item prop="code">
<el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append">
......@@ -20,13 +20,13 @@
</template>
</el-input>
</el-form-item>
<el-form-item prop="new_password" :error="passwordError">
<el-input type="password" v-model="ruleForm.new_password" placeholder="请输入密码">
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="请输入密码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
<el-form-item prop="primary_password">
<el-input type="password" v-model="ruleForm.primary_password" placeholder="请输入确认密码">
<el-form-item prop="passwordR">
<el-input type="password" v-model="ruleForm.passwordR" placeholder="请输入确认密码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
......@@ -59,7 +59,7 @@ export default {
},
data() {
const validatePass = (rule, value, callback) => {
if (value !== this.ruleForm.new_password) {
if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
......@@ -67,23 +67,16 @@ export default {
}
return {
ruleForm: {
contact: '',
account: '',
code: '',
new_password: '',
primary_password: ''
password: '',
passwordR: ''
},
contactError: '',
codeError: '',
passwordError: '',
rules: {
contact: [
{ required: true, message: '请输入手机号码或邮箱', trigger: 'blur' }
],
account: [{ required: true, message: '请输入手机号码或邮箱', trigger: 'blur' }],
code: [{ required: true, message: '请输入4位验证码', trigger: 'blur' }],
new_password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
primary_password: [
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
passwordR: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
......@@ -99,17 +92,13 @@ export default {
methods: {
// 提交
handleResetPassword() {
this.contactError = ''
this.codeError = ''
this.passwordError = ''
this.form.validate().then(() => {
this.handleResetPasswordRequest()
})
},
// 发送验证码
handleSendCode() {
this.contactError = ''
this.form.validateField('contact', response => {
this.form.validateField('account', response => {
if (!response) {
// 开始倒计时
this.$refs['countdown'].start()
......@@ -120,17 +109,18 @@ export default {
// 验证码
handleCodeRequest() {
axios
.post(
this.codeUrl,
Object.assign(
{},
{ contact: this.ruleForm.contact, source_type: 3 },
this.data
),
{ headers: this.headers }
)
.then(() => {
.post(this.codeUrl, Object.assign({}, { account: this.ruleForm.account }, this.data), {
headers: this.headers
})
.then(response => {
const { code } = response.data
if (code) {
// 停止计时
this.$refs['countdown'].stop()
this.handleError(response.data)
} else {
this.$message({ type: 'success', message: '验证码发送成功' })
}
})
.catch(error => {
// 停止计时
......@@ -145,8 +135,13 @@ export default {
headers: this.headers
})
.then(response => {
const { code } = response.data
if (code) {
this.handleError(response.data)
} else {
this.isComplete = true
this.onSuccess && this.onSuccess(response.data)
}
})
.catch(error => {
error.response && this.handleError(error.response.data)
......@@ -154,16 +149,7 @@ export default {
},
// 错误处理
handleError(data) {
const { code, message } = data
if (code === 80103) {
this.contactError = message
}
if (code === 80110) {
this.codeError = message
}
if (code === 80102) {
this.passwordError = message
}
this.$message.error(data.msg)
this.onError && this.onError(data)
this.$emit('error', data)
}
......
src/Register.vue
浏览文件 @ 7690848e
......@@ -7,12 +7,12 @@
<div class="ezj-form" v-else>
<h1 class="ezj-title">账号注册</h1>
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="contact" :error="contactError">
<el-input v-model="ruleForm.contact" placeholder="请输入手机号码或邮箱">
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="请输入手机号码或邮箱">
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" :error="codeError">
<el-form-item prop="code">
<el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append">
......@@ -20,13 +20,8 @@
</template>
</el-input>
</el-form-item>
<el-form-item prop="nickname">
<el-input
v-model="ruleForm.nickname"
placeholder="4-30个字符，支持中英文、数字"
minlength="4"
maxlength="30"
>
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="4-30个字符，支持中英文、数字" minlength="4" maxlength="30">
<i slot="prefix" class="el-input__icon el-icon-edit"></i>
</el-input>
</el-form-item>
......@@ -88,22 +83,16 @@ export default {
return {
dialogVisible: false,
ruleForm: {
contact: '',
account: '',
code: '',
nickname: '',
username: '',
password: '',
secret: 0
},
contactError: '',
codeError: '',
rules: {
contact: [
{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }
],
account: [{ required: true, message: '请输入手机号码或邮箱', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
nickname: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' }
],
username: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
secret: [{ validator: checkSecret, trigger: 'change' }]
},
......@@ -118,16 +107,13 @@ export default {
methods: {
// 提交
handleRegister() {
this.contactError = ''
this.codeError = ''
this.form.validate().then(() => {
this.handleRegisterRequest()
})
},
// 发送验证码
handleSendCode() {
this.contactError = ''
this.form.validateField('contact', response => {
this.form.validateField('account', response => {
if (!response) {
// 开始倒计时
this.$refs['countdown'].start()
......@@ -138,17 +124,18 @@ export default {
// 验证码
handleCodeRequest() {
axios
.post(
this.codeUrl,
Object.assign(
{},
{ contact: this.ruleForm.contact, source_type: 2 },
this.data
),
{ headers: this.headers }
)
.then(() => {
.post(this.codeUrl, Object.assign({}, { account: this.ruleForm.account }, this.data), {
headers: this.headers
})
.then(response => {
const { code } = response.data
if (code) {
// 停止计时
this.$refs['countdown'].stop()
this.handleError(response.data)
} else {
this.$message({ type: 'success', message: '验证码发送成功' })
}
})
.catch(error => {
// 停止计时
......@@ -164,8 +151,13 @@ export default {
headers: this.headers
})
.then(response => {
const { code } = response.data
if (code) {
this.handleError(response.data)
} else {
this.isComplete = true
this.onSuccess && this.onSuccess(response.data)
}
})
.catch(error => {
error.response && this.handleError(error.response.data)
......@@ -173,13 +165,7 @@ export default {
},
// 错误处理
handleError(data) {
const { code, message } = data
if (code === 80103 || code === 80105 || code === 80106) {
this.contactError = message
}
if (code === 80110) {
this.codeError = message
}
this.$message.error(data.msg)
this.onError && this.onError(data)
this.$emit('error', data)
}
......
src/assets/props.js
浏览文件 @ 7690848e
export const register = {
url: '/api/user_center/register',
codeUrl: '/api/user_center/send_register_code',
url: '/api/usercenter/user/register',
codeUrl: '/api/usercenter/user/send-code',
data: { service: 'sofia.ezijing.com' }
}
export const login = {
account: {
url: '/api/user_center/login',
url: '/api/passport/rest/login',
data: { service: 'sofia.ezijing.com' }
},
phone: {
url: '/api/user_center/code_login',
codeUrl: '/api/user_center/send_login_code',
url: '/api/passport/rest/login',
codeUrl: '/api/usercenter/user/send-code',
data: { service: 'sofia.ezijing.com' }
}
}
export const password = {
url: '/api/user_center/reset_password',
codeUrl: '/api/user_center/send_reset_password_code',
url: '/api/usercenter/user/update-pwd',
codeUrl: '/api/usercenter/user/send-code',
data: { service: 'sofia.ezijing.com' }
}
export const logout = {
url: '/api/user_center/logout'
url: '/api/passport/rest/logout'
}
export const user = {
url: '/api/user_center/get_user_info'
url: '/api/passport/account/get-user-info'
}
src/components/AccountLogin.vue
浏览文件 @ 7690848e
<template>
<div class="account-login">
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="login_name" :error="nameError">
<el-input v-model="ruleForm.login_name" placeholder="请输入邮箱或用户名">
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="请输入邮箱或用户名">
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-form-item>
<el-form-item prop="password" :error="passwordError">
<el-form-item prop="password">
<el-input
type="password"
v-model="ruleForm.password"
......@@ -26,7 +26,6 @@
<script>
import axios from '@/utils/axios'
import md5 from 'md5'
export default {
name: 'AccountLogin',
props: {
......@@ -40,15 +39,11 @@ export default {
data() {
return {
ruleForm: {
login_name: '',
account: '',
password: ''
},
nameError: '',
passwordError: '',
rules: {
login_name: [
{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }
],
account: [{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
......@@ -61,8 +56,6 @@ export default {
methods: {
// 提交
handleLogin() {
this.nameError = ''
this.passwordError = ''
this.form.validate().then(() => {
this.handleLoginRequest()
})
......@@ -70,21 +63,18 @@ export default {
// 登录
handleLoginRequest() {
let data = Object.assign({}, this.ruleForm, this.data)
data.password = md5(
'uokoaduw' +
data.password
.split('')
.reverse()
.join('') +
'auhgniq'
)
axios
.post(this.url, data, {
headers: this.headers
})
.then(response => {
this.onSuccess && this.onSuccess(response.data)
this.$emit('complete', response.data)
const { code, data } = response.data
if (code) {
this.handleError(response.data)
} else {
this.onSuccess && this.onSuccess(data)
this.$emit('complete', data)
}
})
.catch(error => {
error.response && this.handleError(error.response.data)
......@@ -92,13 +82,7 @@ export default {
},
// 错误处理
handleError(data) {
const { code, message } = data
if (code === 80111) {
this.nameError = message
}
if (code === 80113) {
this.passwordError = message
}
this.$message.error(data.msg)
this.onError && this.onError(data)
this.$emit('error', data)
}
......
src/components/PhoneLogin.vue
浏览文件 @ 7690848e
<template>
<div class="phone-login">
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="mobile" :error="mobileError">
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号">
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="请输入手机号">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" :error="codeError">
<el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<el-form-item prop="password">
<el-input v-model="ruleForm.password" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append">
<countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button>
......@@ -40,14 +40,12 @@ export default {
data() {
return {
ruleForm: {
mobile: '',
code: ''
account: '',
password: ''
},
mobileError: '',
codeError: '',
rules: {
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
code: [{ required: true, message: '请输入4位验证码', trigger: 'blur' }]
account: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
password: [{ required: true, message: '请输入4位验证码', trigger: 'blur' }]
}
}
},
......@@ -59,16 +57,13 @@ export default {
methods: {
// 提交
handleLogin() {
this.mobileError = ''
this.codeError = ''
this.form.validate().then(() => {
this.handleLoginRequest()
})
},
// 发送验证码
handleSendCode() {
this.mobileError = ''
this.form.validateField('mobile', response => {
this.form.validateField('account', response => {
if (!response) {
// 开始倒计时
this.$refs['countdown'].start()
......@@ -79,13 +74,16 @@ export default {
// 验证码
handleCodeRequest() {
axios
.post(
this.codeUrl,
Object.assign({}, { mobile: this.ruleForm.mobile }, this.data),
{ headers: this.headers }
)
.then(() => {
.post(this.codeUrl, Object.assign({}, { account: this.ruleForm.account }, this.data), { headers: this.headers })
.then(response => {
const { code } = response.data
if (code) {
// 停止计时
this.$refs['countdown'].stop()
this.handleError(response.data)
} else {
this.$message({ type: 'success', message: '验证码发送成功' })
}
})
.catch(error => {
// 停止计时
......@@ -96,12 +94,17 @@ export default {
// 登录
handleLoginRequest() {
axios
.post(this.url, Object.assign({}, this.ruleForm, this.data), {
.post(this.url, Object.assign({ type: 2 }, this.ruleForm, this.data), {
headers: this.headers
})
.then(response => {
this.onSuccess && this.onSuccess(response.data)
this.$emit('complete', response.data)
const { code, data } = response.data
if (code) {
this.handleError(response.data)
} else {
this.onSuccess && this.onSuccess(data)
this.$emit('complete', data)
}
})
.catch(error => {
error.response && this.handleError(error.response.data)
......@@ -109,13 +112,7 @@ export default {
},
// 错误处理
handleError(data) {
const { code, message } = data
if (code === 80209) {
this.mobileError = message
}
if (code === 80110) {
this.codeError = message
}
this.$message.error(data.msg)
this.onError && this.onError(data)
this.$emit('error', data)
}
......
vue.config.js
浏览文件 @ 7690848e
......@@ -13,6 +13,6 @@ module.exports = {
key: fs.readFileSync(path.join(__dirname, './cert/dev.ezijing.com.key')),
cert: fs.readFileSync(path.join(__dirname, './cert/dev.ezijing.com.pem'))
},
proxy: 'http://dev.ezijing.com:3006'
proxy: 'https://chinafflg.ezijing.com'
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论