Browse Source

登录账户优化

master
陈裕财 3 years ago
parent
commit
99b1c5ff8a
  1. 4
      config/index.js
  2. 40
      src/api/login.js
  3. 12
      src/api/sms/sms.js
  4. 78
      src/utils/requestNoAuth.js
  5. 2
      src/views/layout/components/UserInfo.vue
  6. 41
      src/views/login/components/login.vue
  7. 31
      src/views/login/components/register.vue
  8. 6
      src/views/login/index.scss
  9. 2
      src/views/login/resetPassword.vue

4
config/index.js

@ -10,7 +10,7 @@ module.exports = {
assetsSubDirectory: '', assetsSubDirectory: '',
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
/**
'/api/m1/xm': { '/api/m1/xm': {
target: 'http://localhost:7067', target: 'http://localhost:7067',
changeOrigin: true, changeOrigin: true,
@ -18,7 +18,7 @@ module.exports = {
'^/api/m1/xm': '/xm' '^/api/m1/xm': '/xm'
} }
}, },
/**
'/api/m1/arc': { '/api/m1/arc': {
target: 'http://localhost:7012', target: 'http://localhost:7012',
changeOrigin: true, changeOrigin: true,

40
src/api/login.js

@ -1,4 +1,4 @@
import axios from 'axios'//免登录访问
import axios from '@/utils/requestNoAuth'//免登录访问
import axiosAuth from '@/utils/request'//待token访问 import axiosAuth from '@/utils/request'//待token访问
@ -10,26 +10,6 @@ import config from '@/common/config'
let base=config.getOauth2LoginBasePath(); let base=config.getOauth2LoginBasePath();
var curlDomain=window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
var baseApiUrl="";
if(process.env.BASE_API ){
if(process.env.BASE_API.indexOf("http")<0 && process.env.BASE_API.indexOf("wwww.")<0){
baseApiUrl=curlDomain+"/"+process.env.BASE_API+"/"+process.env.VERSION;
}else{
baseApiUrl=process.env.BASE_API+"/"+process.env.VERSION;
}
}else{
baseApiUrl=curlDomain+"/api/"+process.env.VERSION
}
var indexOfHttp=baseApiUrl.indexOf("://");
if(indexOfHttp>0){
baseApiUrl=baseApiUrl.substr(0,indexOfHttp+3)+baseApiUrl.substr(indexOfHttp+3,baseApiUrl.length).replace("//","/");
}else{
baseApiUrl=baseApiUrl.replace("//","/")
}
//let base=''; //let base='';
export function doLoginByUserloginid(userloginid, password,grantType,authType,deptid,userid) { export function doLoginByUserloginid(userloginid, password,grantType,authType,deptid,userid) {
removeToken(); removeToken();
@ -41,7 +21,7 @@ export function doLoginByUserloginid(userloginid, password,grantType,authType,de
userid:userid, userid:userid,
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/login/token?grantType='+grantType,
url: base+'/login/token?grantType='+grantType,
method: 'post', method: 'post',
data data
}) })
@ -66,7 +46,7 @@ export function checkUserid(userid ) {
userid: userid userid: userid
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/check/userid',
url: base+'/user/check/userid',
method: 'post', method: 'post',
data data
}) })
@ -77,7 +57,7 @@ export function checkDisplayUserid(displayUserid ) {
displayUserid: displayUserid displayUserid: displayUserid
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/check/displayUserid',
url: base+'/user/check/displayUserid',
method: 'post', method: 'post',
data data
}) })
@ -89,14 +69,14 @@ export function checkPhoneno(phoneno ) {
phoneno: phoneno phoneno: phoneno
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/check/phoneno',
url: base+'/user/check/phoneno',
method: 'post', method: 'post',
data data
}) })
} }
export function queryByUserloginid( params ) { export function queryByUserloginid( params ) {
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/queryByUserloginid',
url: base+'/user/queryByUserloginid',
method: 'get', method: 'get',
params:params params:params
}) })
@ -114,7 +94,7 @@ export function doRegister( userInfo ) {
branchId:userInfo.branchId branchId:userInfo.branchId
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/register',
url: base+'/user/register',
method: 'post', method: 'post',
data data
}) })
@ -129,7 +109,7 @@ export function resetPasswordByPhoneno( userInfo ) {
userid:userInfo.userid userid:userInfo.userid
} }
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/password/reset?type=sms',
url: base+'/user/password/reset?type=sms',
method: 'post', method: 'post',
data data
}) })
@ -165,7 +145,7 @@ export function getUserInfo(params) {
export function sendEmail(params) { export function sendEmail(params) {
const data=params; const data=params;
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/sendEmail',
url: base+'/user/sendEmail',
method: 'post', method: 'post',
data data
}) })
@ -176,7 +156,7 @@ export function sendEmail(params) {
export function validEmailCode(params) { export function validEmailCode(params) {
return axios({ return axios({
url: baseApiUrl+'/'+base+'/user/validEmailCode',
url: base+'/user/validEmailCode',
method: 'get', method: 'get',
params:params params:params
}) })

12
src/api/sms/sms.js

@ -1,4 +1,6 @@
import axios from '@/utils/request'
import axiosAuth from '@/utils/request'
import axios from '@/utils/requestNoAuth'//免登录访问
import config from '@/common/config' import config from '@/common/config'
@ -8,8 +10,12 @@ let base=config.getSmsBasePath();
* 发送短信验证码验证短信验证码接口 * 发送短信验证码验证短信验证码接口
**/ **/
//发送短信验证码
export const sendNoAuthSmsCode = params => { return axios.post(`${base}/sms/sendSmsCode`, params); };
//发送短信验证码 //发送短信验证码
export const sendSmsCode = params => { return axios.post(`${base}/sms/sendSmsCode`, params); };
export const sendSmsCode = params => { return axiosAuth.post(`${base}/sms/sendSmsCode`, params); };
//验证短信验证码 //验证短信验证码
export const validateSmsCode = params => { return axios.post(`${base}/sms/validateSmsCode`, params); };
export const validateSmsCode = params => { return axiosAuth.post(`${base}/sms/validateSmsCode`, params); };

78
src/utils/requestNoAuth.js

@ -0,0 +1,78 @@
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import router from '@/router'
var curlDomain=window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
var baseApiUrl="";
if(process.env.BASE_API ){
if(process.env.BASE_API.indexOf("http")<0 && process.env.BASE_API.indexOf("wwww.")<0){
baseApiUrl=curlDomain+"/"+process.env.BASE_API+"/"+process.env.VERSION;
}else{
baseApiUrl=process.env.BASE_API+"/"+process.env.VERSION;
}
}else{
baseApiUrl=curlDomain+"/api/"+process.env.VERSION
}
var indexOfHttp=baseApiUrl.indexOf("://");
if(indexOfHttp>0){
baseApiUrl=baseApiUrl.substr(0,indexOfHttp+3)+baseApiUrl.substr(indexOfHttp+3,baseApiUrl.length).replace("//","/");
}else{
baseApiUrl=baseApiUrl.replace("//","/")
}
// create an axios instance
const service = axios.create({
baseURL:baseApiUrl, // api的base_url
timeout: 25000 // request timeout
})
// request interceptor
service.interceptors.request.use(config => {
// Do something before request is sent
var token=getToken();
if(token==null ||token=='' ||token=="" || token ==undefined ){
return config;
}else{
//config.headers['Authorization'] = 'Bearer '+token // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone interceptor
service.interceptors.response.use(
response => {
if(response.data && response.data.tips && response.data.tips.msg == 'Full authentication is required to access this resource'){
Message.closeAll()
Message.error('会话过期,请重新登陆')
//response.data.tips.msg="会话过期,请重新登陆";
store.dispatch('FedLogOut').then(() => {
router.replace({path: '/login'})
})
}
return response
},
error => {
console.log(error)// for debug
if(error.response){
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
Message.closeAll()
Message.error('会话过期,请重新登陆')
store.dispatch('FedLogOut').then(() => {
router.replace({path: '/login'})
})
return;
}
}
Message.closeAll()
return Promise.reject(error)
})
export default service

2
src/views/layout/components/UserInfo.vue

@ -264,7 +264,7 @@ export default {
setToken( res.data.data.accessToken.tokenValue) setToken( res.data.data.accessToken.tokenValue)
removeCacheUserInfo(); removeCacheUserInfo();
this.$store.dispatch('GetUserInfo').then((res2)=>{ this.$store.dispatch('GetUserInfo').then((res2)=>{
this.$router.push({ path: '/' });
this.$router.go(0)
}).catch(err=>{ }).catch(err=>{
}); });

41
src/views/login/components/login.vue

@ -2,18 +2,18 @@
<div> <div>
<div v-if="!isRestPwd"> <div v-if="!isRestPwd">
<div class="login_form"> <div class="login_form">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="displayUserid" v-show="loginForm.authType=='password_display_userid'">
<el-input class="inp" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="账号"></el-input>
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top">
<el-form-item prop="displayUserid" v-show="loginForm.authType=='password_display_userid'" label="登录账号">
<el-input class="inp" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="登录账号"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" v-show="loginForm.authType=='password_display_userid'">
<el-input class="inp" show-password v-model="loginForm.password" autoComplete="on" placeholder="密码"></el-input>
<el-form-item prop="password" v-show="loginForm.authType=='password_display_userid'" label="登录密码">
<el-input class="inp" show-password v-model="loginForm.password" autoComplete="on" placeholder="登录密码"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="phoneno" v-show="loginForm.authType=='sms'">
<el-form-item prop="phoneno" v-show="loginForm.authType=='sms'" label="手机号码">
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> <el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="smsCode" v-show="loginForm.authType=='sms'">
<el-form-item prop="smsCode" v-show="loginForm.authType=='sms'" label="短信验证码">
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> <el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
</el-input> </el-input>
<el-button class="sendCode" :disabled="abledBut" @click.prevent="sendPhonenoSmsCode('login')"> <el-button class="sendCode" :disabled="abledBut" @click.prevent="sendPhonenoSmsCode('login')">
@ -22,17 +22,19 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-button class="login" :loading="loading" @click.native.prevent="handleLogin">
<span class="text"> </span>
</el-button>
</el-form> </el-form>
<div class="oper"> <div class="oper">
<a @click="isRestPwd = true">忘记密码</a> <a @click="isRestPwd = true">忘记密码</a>
<a @click="loginByShowAccount">演示账户登录</a> <a @click="loginByShowAccount">演示账户登录</a>
<a v-if="loginForm.authType == 'password_display_userid' " @click="loginForm.authType = 'sms'">手机号登录</a> <a v-if="loginForm.authType == 'password_display_userid' " @click="loginForm.authType = 'sms'">手机号登录</a>
<a v-if="loginForm.authType == 'sms' " @click="loginForm.authType = 'password_display_userid' ">密码登录</a> <a v-if="loginForm.authType == 'sms' " @click="loginForm.authType = 'password_display_userid' ">密码登录</a>
</div> </div>
<el-button class="login" :loading="loading" @click.native.prevent="handleLogin">
<span class="text"> </span>
</el-button>
</div> </div>
<div class="bottom"> <div class="bottom">
<el-divider content-position="center">第三方登录方式</el-divider> <el-divider content-position="center">第三方登录方式</el-divider>
@ -47,12 +49,12 @@
<div v-if="isRestPwd"> <div v-if="isRestPwd">
<div class="login_form"> <div class="login_form">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="phoneno" >
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top">
<el-form-item prop="phoneno" label="手机号码">
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> <el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="smsCode">
<el-form-item prop="smsCode" label="短信验证码">
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> <el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
</el-input> </el-input>
<el-button :disabled="abledBut" class="sendCode" @click.prevent="sendPhonenoSmsCode('changePassword')"> <el-button :disabled="abledBut" class="sendCode" @click.prevent="sendPhonenoSmsCode('changePassword')">
@ -61,7 +63,7 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item prop="password" >
<el-form-item prop="password" label="新密码">
<el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="新密码"> <el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="新密码">
</el-input> </el-input>
</el-form-item> </el-form-item>
@ -80,7 +82,7 @@
</template> </template>
<script> <script>
import { sendSmsCode } from '@/api/sms/sms';
import { sendNoAuthSmsCode } from '@/api/sms/sms';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import md5 from 'js-md5'; import md5 from 'js-md5';
import { resetPasswordByPhoneno,getTpaState } from '@/api/login'; import { resetPasswordByPhoneno,getTpaState } from '@/api/login';
@ -105,6 +107,11 @@ export default {
this.abledBut = false this.abledBut = false
this.setTimeNum = 60 this.setTimeNum = 60
} }
},
isRestPwd(){
clearInterval(this.timeWrap)
this.abledBut = false
this.setTimeNum = 60
} }
}, },
@ -198,7 +205,7 @@ export default {
phoneno:this.loginForm.phoneno, phoneno:this.loginForm.phoneno,
scene:scene scene:scene
} }
sendSmsCode(params).then(res=>{
sendNoAuthSmsCode(params).then(res=>{
if(res.data.tips.isOk){ if(res.data.tips.isOk){
this.$notify.success("发送成功"); this.$notify.success("发送成功");
if (this.setTimeNum > 0) { if (this.setTimeNum > 0) {

31
src/views/login/components/register.vue

@ -1,34 +1,37 @@
<template> <template>
<div> <div>
<div class="login_form"> <div class="login_form">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top">
<el-form-item prop="displayUserid" title="登录账号">
<el-form-item prop="displayUserid" label="登录账号">
<el-input class="inp" name="displayUserid" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="登录账号" > <el-input class="inp" name="displayUserid" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="登录账号" >
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" title="登录密码">
<el-form-item prop="password" label="登录密码">
<el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="密码"> <el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="密码">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="username" title="用户名称">
<el-form-item prop="username" label="用户名称">
<el-input class="inp" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名称" > <el-input class="inp" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名称" >
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="phoneno" title="手机号码">
<el-form-item prop="phoneno" label="手机号码">
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> <el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="smsCode" title="短信验证码">
<el-form-item prop="smsCode" label="短信验证码">
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> <el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
</el-input> </el-input>
<el-button class="sendCode" @click.prevent="sendPhonenoSmsCode"><span class="text">发送验证码</span></el-button>
<el-button class="sendCode" :disabled="abledBut" @click.prevent="sendPhonenoSmsCode">
<span class="text" v-if="!abledBut">发送验证码</span>
<span class="text" v-else>({{setTimeNum}}s)</span>
</el-button>
<span v-if="phonenoUsers!=null && phonenoUsers.length>0"> 该手机号已注册有{{phonenoUsers.length}}个账户<font color="blue"></font> <span v-if="phonenoUsers!=null && phonenoUsers.length>0"> 该手机号已注册有{{phonenoUsers.length}}个账户<font color="blue"></font>
<el-button type="text" @click="phonenoUsersVisible=true">查看明细</el-button> <el-button type="text" @click="phonenoUsersVisible=true">查看明细</el-button>
</span> </span>
@ -67,7 +70,7 @@
</template> </template>
<script> <script>
import { sendSmsCode } from '@/api/sms/sms';
import { sendNoAuthSmsCode } from '@/api/sms/sms';
import { checkPhoneno,checkDisplayUserid,doRegister,queryByUserloginid } from '@/api/login'; import { checkPhoneno,checkDisplayUserid,doRegister,queryByUserloginid } from '@/api/login';
import LangSelect from '@/components/LangSelect'; import LangSelect from '@/components/LangSelect';
import SocialSign from '../socialsignin'; import SocialSign from '../socialsignin';
@ -141,6 +144,9 @@ export default {
addBranchFormVisible:false, // addBranchFormVisible:false, //
phonenoUsers:[], phonenoUsers:[],
phonenoUsersVisible:false, phonenoUsersVisible:false,
abledBut: false, //
setTimeNum: 60, //
} }
}, },
methods: { methods: {
@ -167,9 +173,16 @@ export default {
queryByUserloginid({userloginid:this.loginForm.phoneno,idType:"phoneno"}).then(res0=>{ queryByUserloginid({userloginid:this.loginForm.phoneno,idType:"phoneno"}).then(res0=>{
if(res0.data.tips.isOk){ if(res0.data.tips.isOk){
this.phonenoUsers=res0.data.data; this.phonenoUsers=res0.data.data;
sendSmsCode(params).then(res=>{
sendNoAuthSmsCode(params).then(res=>{
if(res.data.tips.isOk){ if(res.data.tips.isOk){
this.$notify.success("发送成功"); this.$notify.success("发送成功");
if (this.setTimeNum > 0) {
this.abledBut = true
this.timeWrap = setInterval(() => {
this.setTimeNum -= 1
}, 1000)
}
}else{ }else{
this.$notify.error(res.data.tips.msg); this.$notify.error(res.data.tips.msg);
} }

6
src/views/login/index.scss

@ -12,7 +12,6 @@
.login_content { .login_content {
width: 1200px; width: 1200px;
height: 600px;
background: #FCFCFE; background: #FCFCFE;
border-radius: 30px; border-radius: 30px;
display: flex; display: flex;
@ -47,11 +46,11 @@
} }
.login_box { .login_box {
width: 418px; width: 418px;
height: 472px;
border: 1px solid #F1F1F1; border: 1px solid #F1F1F1;
box-shadow: 1px 7px 25px 2px rgba(22, 22, 93, 0.04); box-shadow: 1px 7px 25px 2px rgba(22, 22, 93, 0.04);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px;
.login_box_content { .login_box_content {
padding: 28px 30px 16px 30px; padding: 28px 30px 16px 30px;
.top { .top {
@ -95,13 +94,14 @@
} }
} }
.oper { .oper {
margin-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: #40485B; color: #40485B;
font-size: 14px; font-size: 14px;
} }
.login { .login {
margin-top: 40px;
margin-top: 20px;
width: 100%; width: 100%;
background-color: #FE9A00; background-color: #FE9A00;
height: 42px; height: 42px;

2
src/views/login/resetPassword.vue

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<el-form autoComplete="on" label-width="120px" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form autoComplete="on" label-width="120px" label-position="top" :model="loginForm" :rules="loginRules" ref="loginForm">
<div> <div>
<div class="logo"> <div class="logo">
<img src="../../assets/image/logo1.png" alt="" /> <img src="../../assets/image/logo1.png" alt="" />

Loading…
Cancel
Save