登录和注册（三）01登录页——原生loading、setItem设置session、store.commit使用vuex、原生http.post请求、removeAttribute()删除html属性
效果
代码
src\views\myCenter\accountManagement\loginRegister\login.vue
<template>
<div class="login" v-if="!isIsc">
<div class="login-div">
<div class="login-img">
<LogoIndex myHeight="100%" myWidth="100%"></LogoIndex>
<!--<img :src="photoPath"/>-->
</div>
</div>
<div class="login-background-image"></div>
<div class="login-right">
<div class="login-intentionList">
<div id="intentionList-element">
<div class="intentionList-tab">
<ul>
<li v-for="(tab, tabIndex) in tabs"
:class="[{ active1: tabIndex == tabNum }, { active2: tabIndex !== tabNum }]" @click="tabBtn(tabIndex)">{{
tab.name }}
</li>
</ul>
</div>
<!-- 成果意向内容的显示-->
<div class="login-right-content" v-show="tabNum == 0 ? tabShow : !tabShow">
<ul class="login-right-ul">
<li>
<p>账 号</p>
<div>
<span class="login-right-ul-span login-right-span">
<img src="img/icon-userName.png" alt="">
</span>
<input type="text" id="inputs" v-model="loginss" placeholder="手机号/邮箱">
<p style="position: absolute;top: 32px;font-size: 12px;color: red;">{{ loginsss }}</p>
</div>
</li>
<li>
<span>密 码</span>
<div>
<span class="login-right-ul-span login-right-li-span">
<img src="img/icon-pass.png" alt="">
</span>
<input type="password" id="pass" v-model="passwords" @keyup.enter="usernames()">
<p style="position: absolute;top: 32px;font-size: 12px;color: red;">{{ passwordss }}</p>
</div>
</li>
<li>
<span>验证码</span>
<div style="background: #fff;">
<p style="width: 175px;background: #eee;height: 100%;border-radius: 5px;"><input type="text"
v-model="veriCode" style="width: 165px; left: 70px;"></p>
<p @click="ress" style="width: 100px;margin-top: 4px;margin-left: 20px;"><img :src="imgCode" alt=""
style="height: 34px;width: 119px;"></p>
</div>
</li>
</ul>
<div class="forget">
<div class="forget-remember">
</div>
<div class="forget-immediately">
<!--<span class="forget-immediately-pass" @click="remember">忘记密码</span>-->
<!--<span class="forget-immediately-span">|</span>-->
<span class="forget-immediately-rem" @click="registers">立即注册</span>
</div>
</div>
<p class="errors">{{ usererror }}</p>
<div class="knob">
<button class="knob-abolish" @click="calcel">取 消</button>
<button class="Public-Button" @click="usernames()">登 录</button>
</div>
</div>
<!-- 雇佣意向内容的显示-->
<div class="login-right-contents" v-show="tabNum == 1 ? tabShow : !tabShow">
<ul class="login-right-ul" style="margin-top: -10px;">
<li>
<p>手机号</p>
<div>
<img src="img/icon-phone.png" class="div-img">
<input type="text" id="inputes" class="inp" maxlength="11" v-model="phoness">
<p style="position: absolute;margin-top: -13px;font-size: 12px;color: red;">{{ loginssse }}</p>
</div>
</li>
<li>
<span>验证码</span>
<div class="login-right-ul-code">
<img src="img/icon-pass.png" class="password-img">
<input type="text" id="passw" class="inp" v-model="veriPhCode" @keyup.enter="useres()">
</div>
<button class="password-button iphoneBoundBtn" @click="phones()">获取手机验证码</button>
</li>
</ul>
<p class="register-p" @click="registers">立即注册</p>
<p class="err">{{ usererr }}</p>
<div class="knob knobs">
<button class="knob-abolish" @click="calcel">取 消</button>
<button class="Public-Button" @click="useres()">登 录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as allCookie from '@/utils/utils.js'
import { post } from "@/utils/path";
import { ref, inject } from "vue";
import { useUserStore } from '@/store/index.js'
import axios from '@/utils/request'
export default {
components: {},
data() {
return {
photoPath: "",
tabShow: true,
imgCode: "",
tabs: [{
name: "普通登录"
},
// {
// name: "动态登录"
// },
],
tabNum: 0,
usererr: '',
usererror: '',
loginss: '',
passwords: '',
veriPhCode: '',
phoness: '',
enPwd: '',
loginsss: '',
loginssse: '',
veriCode: '',
passwordss: '',
ser: '',
key: "",
constant: inject('constant'),
encrypt: inject('encrypt'),
isIsc: inject('isIsc'),
userStore: useUserStore(),
imageKey: '',
iscLoginPath: inject('iscLoginPath'),
iscLoginOutPath: inject('iscLoginOutPath')
}
},
methods: {
// 切换登录类型
tabBtn(tabIndex) {
this.tabNum = tabIndex;
this.ress();
},
// 更换图片验证码
ress() {
axios.get(process.env.VUE_APP_API_HOST + this.constant.publicCoop + '/login/captcha').then((res) => {
if (res.data.code == '200') {
this.imgCode = 'data:image/jpeg;base64,' + res.data.data.imageBase64;
this.imageKey = res.data.data.imageKey
}
})
},
// 忘记密码
remember() {
this.$router.push({
path: '/RememberPassword'
})
},
// 立即注册
registers() {
this.$router.push('/register')
},
useres() { //手机验证码登录；
if (this.phoness == '') {
this.loginssse = '请输入手机号'
return false;
} else {
this.loginssse = ''
}
if (this.veriPhCode == '') {
this.usererr = '请输入短信验证码';
return false
} else {
this.usererr = '';
var that = this;
var item = {
"phone": this.encrypt.dataEncrypt(this.phoness),
"verificationCode": this.veriPhCode,
'pegsecret': this.ser,
};
var loading = this.$loading({
lock: true,
text: '登录中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
post(this.constant.publicCoop + '/login/phoneLogin', item).then(function (response) {
if (response.data.result == 0) {
loading.close();
window.sessionStorage.setItem('tokenId', response.data.data.tokenId);
window.sessionStorage.setItem('userName', response.data.data.userName);
window.sessionStorage.setItem('userType', response.data.data.userType);
window.sessionStorage.setItem('userId', response.data.data.userId);
window.sessionStorage.setItem('status', response.data.data.status);
window.sessionStorage.setItem('isSgcc', response.data.data.isSgcc);
window.sessionStorage.setItem('thumb', response.data.data.thumb);
window.sessionStorage.setItem('userRealName', response.data.data.user_real_name);
window.sessionStorage.setItem('is_owner_auth', response.data.data.is_owner_auth);
window.sessionStorage.setItem('deptname', response.data.data.deptname);
window.sessionStorage.setItem('ser', SG_sm2Encrypt(that.key,
"0453f1d34ffd6489c41c8ffba7a604e48097ed605361c794fc9b6d7df064f081f72d9bdc592db2fcc8c6599350e67969bb9227d1ac04a50268353226c45bb35424"
));
allCookie.CookieSet("web_token", response.data.data.tokenId);
//区分是否显示同步写入和同步读取
window.sessionStorage.setItem('manualSync', response.data.data.manualSync);
window.sessionStorage.setItem('accountName', response.data.data.accountName);
that.$store.commit('getAccountName');
that.$store.commit('getManualSync');
that.$store.commit('changeUserName');
that.$store.commit('changeUserId');
that.$store.commit('getUserType');
that.$store.commit('setCompanyType');
var str = window.location.href;
var num = str.indexOf("?");
var strTwo = str.substr(num + 1);
var arr = strTwo.split("#");
var tic = arr[0];
let redirect = decodeURIComponent(that.$route.query.redirect || '/');
let id = decodeURIComponent(that.$route.query.id || '');
if (window.location.hash != "#/login") {
that.$router.push({
path: redirect + id
})
} else {
that.$router.push({
path: '/homePage'
})
}
if (sessionStorage.getItem("tokenId")) {
var item = {
"tokenId": sessionStorage.getItem("tokenId")
}
that.$http.post(process.env.API_HOST + '/user/userInfo', item).then(function (response) {
console.log(response)
if (response.data.result == 0) {
window.sessionStorage.setItem('roles', response.data.data.roles);
window.sessionStorage.setItem('parentName', response.data.data.parentName);
}
})
}
} else if (response.data.result == -1) {
loading.close();
var errorMessage = response.data.data.message;
if (response.data.data.code == "PES_1201") {
window.sessionStorage.setItem("IphoneNumber", that.phoness)
window.sessionStorage.setItem("IphoneTokenId", response.data.data.token)
that.$router.push({
path: "/changPasswordP"
})
}
that.usererr = errorMessage;
}
})
}
},
usernames() { //用户名密码登录；
if (this.loginss == '') {
this.loginsss = '请输入手机号或邮箱'
return false;
} else {
this.loginsss = ''
}
if (this.passwords == '') {
this.passwordss = '请输入密码';
return false
} else {
var salt = generateRandomCharacter(6);
var ciphterData = SG_sm2Encrypt(this.passwords + ',' + salt + SG_sm3encrypt(this.passwords + ',' + salt), "045305e570ba7c50795aadf945354eb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942b174050f9b3614a658a790939a5921c0920bacf6a3070e007bf217d70")
this.enPwd = ciphterData
this.passwordss = '';
}
if (this.veriCode == '') {
this.usererror = '请输入图形验证码';
return false
} else {
this.usererror = ''
var that = this;
var list = {
"userName": this.encrypt.dataEncrypt(this.loginss),
"certificate": this.enPwd,
"veriCode": this.veriCode,
'pegsecret': this.ser,
"imageKey": this.imageKey
}
var loading = this.$loading({
lock: true,
text: '登录中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
post('/isc/login', list)
.then(function (response) {
loading.close();
if (response.data.code == '200') {
window.sessionStorage.setItem('tokenId', response.data.data.jwt);
window.sessionStorage.setItem('Web-Token', response.data.data.jwt);
allCookie.CookieSet('web_token', response.data.data.jwt);
} else {
that.ress();
that.usererror = response.data.message;
if (response.data.lbssCode == 'PES_1201') {
window.sessionStorage.setItem("IphoneNumber", that.loginss)
window.sessionStorage.setItem("IphoneTokenId", response.data.data)
that.$router.push('/changPasswordP')
}
return Promise.reject(response.data.message);
}
})
.then(function (response1) {
post(that.constant.publicCoop + '/users/userInfo')
.then(async (response) => {
if (response.data.code == 200) {
window.sessionStorage.setItem('roles', response.data.data.roles);
window.sessionStorage.setItem('userName', response.data.data.userName);
window.sessionStorage.setItem('userType', response.data.data.userType); //缺失
window.sessionStorage.setItem('companyType', response.data.data.companyType); //缺失
window.sessionStorage.setItem('userId', response.data.data.userId);
window.sessionStorage.setItem('status', response.data.data.status); //缺失
window.sessionStorage.setItem('isSgcc', response.data.data.isSgcc);
window.sessionStorage.setItem('ser', response.data.data.pegsecret); //缺失
window.sessionStorage.setItem('thumb', response.data.data.thumb);
window.sessionStorage.setItem('userRealName', response.data.data.user_real_name);
window.sessionStorage.setItem('deptname', response.data.data.deptname);
window.sessionStorage.setItem('parentName', response.data.data.parentName);
that.userStore.changeUserName();
that.userStore.getUserType();
that.userStore.setCompanyType();
var url = window.location.href;
var valiable = url.split("?")[0];
if (sessionStorage.getItem('prefectureCode') == 'ZQ00109') {
window.location.href = valiable + "#" + '/intellectual/intellectualHomePage';
} else {
that.$router.push({
path: 'homePage'
})
}
} else {
that.$router.push({
path: 'homePage'
})
}
})
}).catch(() => { })
}
},
settime(val, countdown) {
var stop = setInterval(function () {
if (countdown == 0) {
val.removeAttribute("disabled");
val.innerHTML = "获取手机验证码";
clearInterval(stop);
} else {
val.setAttribute("disabled", true);
val.innerHTML = "重新发送(" + countdown + "s)";
countdown--;
}
}, 1000)
},
// 发送验证码
phones() {
if (this.phoness == '') {
this.loginssse = '请填写手机号'
return false;
}
var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0];
this.settime(iphoneBoundBtn, 60);
var items = {
"phone": this.encrypt.dataEncrypt(this.phoness),
sendType: "1"
};
var that = this;
post(this.constant.publicCoop + '/login/SMSVerificate', items).then(function (res) {
if (res.data.result == 0) {
} else {
that.usererr = res.data.hint
}
})
},
// 取消登录
calcel() {
this.$router.back(-1)
},
iscLogin() {
if (this.isIsc) {
if (allCookie.CookieRemove('web_token')) {
var that = this;
post('/isc/iscLogout', {
"isc": "web"
}).then(function () {
window.sessionStorage.removeItem('roles');
window.sessionStorage.removeItem('tokenId');
window.sessionStorage.removeItem('userName');
window.sessionStorage.removeItem('userType');
window.sessionStorage.removeItem('companyType');
window.sessionStorage.removeItem('userId');
window.sessionStorage.removeItem('status');
window.sessionStorage.removeItem('isSgcc');
window.sessionStorage.removeItem('Web-Token');
window.sessionStorage.removeItem('ser');
window.sessionStorage.removeItem('manualSync');
window.sessionStorage.removeItem('accountName');
window.sessionStorage.removeItem('userRealName');
window.sessionStorage.removeItem('url');
window.sessionStorage.removeItem('thumb');
window.sessionStorage.removeItem('parentName');
window.sessionStorage.removeItem('is_owner_auth');
window.sessionStorage.removeItem('deptname');
allCookie.CookieRemove('web_token')
})
let str = window.location.href;
let arr = str.split("#")[0];
if (window.sessionStorage.getItem('prefectureCode') == 'ZQ00109') {
window.location.href = this.iscLoginOutPath + '?service=' + arr + "#/intellectual/intellectualHomePage";
} else {
window.location.href = this.iscLoginOutPath + '?service=' + arr + '#/homePage';
}
} else {
var str1 = window.location.href
let str = str1.split("#")[0]
if (this.$route.query.url != undefined) {
window.location.href = this.iscLoginPath + "?service=" + str + this.$route.query.url;
} else {
window.location.href = this.iscLoginPath + "?service=" + str;
}
}
}
},
generateKey() {
var rng = new SecureRandom();
var key = new Array(16);
rng.nextBytes(key);
return Hex.encode(key, 0, key.length);
},
SMkey() {
var key = this.generateKey();
var iv = this.generateKey();
this.key = key + "," + iv;
var pubkey = "0453f1d34ffd6489c41c8ffba7a604e48097ed605361c794fc9b6d7df064f081f72d9bdc592db2fcc8c6599350e67969bb9227d1ac04a50268353226c45bb35424";
this.ser = SG_sm2Encrypt(this.key, pubkey);
}
},
mounted() {
this.ress();
this.SMkey();
this.iscLogin();
}
}
</script>
<style type="text/css" scoped>
.intentionList-tab {
width: 400px;
clear: both;
content: "";
margin: 20px auto;
display: table;
}
.intentionList-tab ul {
width: 400px;
height: 48px;
border-bottom: 1px solid #ccc;
}
.intentionList-tab ul li {
float: left;
width: 195px;
height: 49px;
text-align: center;
line-height: 50px;
cursor: pointer;
list-style: none;
font-size: 16px;
color: rgb(51, 51, 51);
}
.active1 {
border-bottom: 1px solid #009688;
box-sizing: border-box;
}
.active2 {
/*background: #ebf4f4;*/
}
.login {
width: 100%;
}
.login-right-content {
width: 400px;
margin: auto;
}
.knobs {
margin-top: 29px;
}
.register-p {
text-align: right;
color: #009688;
margin-top: 10px;
font-size: 13px;
cursor: pointer;
padding-right: 8px;
}
#logins .el-tabs__header {
width: 92%;
margin: 30px auto;
}
#logins .el-tabs__content {
margin-top: -25px;
}
#logins #tab-first {
text-align: center;
width: 195px;
height: 44px;
}
#logins .el-tabs__nav-wrap {
height: 45px;
}
#logins #tab-second {
text-align: center;
width: 195px;
height: 44px;
}
#logins .el-tabs__active-bar {
width: 180px !important;
background-color: #019587;
}
#logins .el-tabs__item {
font-size: 20px;
}
#logins .is-active {
color: #000;
font-weight: bold;
}
#logins .el-tabs__item.is-active {
color: #000;
}
#logins .el-tabs__item:hover {
color: #000;
cursor: pointer;
}
.login-right-contents {
width: 90%;
margin: 35px auto;
}
.login-right-ul .div-img {
width: 20px;
height: 22px;
margin-left: 6px;
margin-top: 10px;
}
#inputes,
#passw {
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
padding-left: 5px;
}
#inputes {
width: 285px;
margin-top: -6px;
}
.login-right-ul li #passw {
width: 165px !important;
margin-top: -6px;
}
.login-right-ul li .login-right-ul-code {
width: 210px;
}
.login-right-ul li .password-button {
width: 100px;
height: 42px;
background: #f2f2f2;
float: right;
margin-top: -43px;
margin-right: 13px;
border-radius: 5px;
font-size: 13px;
color: #009688;
border: 1px solid #e4e4e4;
cursor: pointer;
}
.login-right-ul li .inp {
/*margin-left: 15px;*/
position: absolute;
top: 12px;
left: 99px;
width: 270px !important;
}
.login-right-ul .password-img {
width: 20px;
height: 22px;
margin-left: 6px;
margin-top: 10px;
}
.login-div {
width: 1200px;
height: 80px;
margin: 0 auto;
}
.login-img {
float: left;
width: 215px;
height: 55px;
margin-top: 1%;
}
.login-img img {
height: 100%;
}
.login-background-image {
width: 100%;
height: 600px;
background: url('../../../../../public/img/login.png') no-repeat;
background-size: 100% 100%;
}
.login-right {
width: 435px;
height: 373px;
background: #fff;
border-radius: 5px;
position: absolute;
top: 220px;
right: 120px;
}
.login-right-p span a {
display: inline-block;
text-align: center;
text-decoration: none;
width: 188px;
height: 60px;
line-height: 60px;
font-size: 20px;
color: #000;
}
.login-right-p span:nth-of-type(2) {
margin-left: 10px;
}
.login-right-ul {
width: 400px;
list-style: none;
}
.login-right-ul li p {
float: left;
}
.login-right-ul li span {
float: left;
}
.login-right-ul li {
width: 400px;
height: 42px;
line-height: 42px;
color: rgb(121, 121, 121) !important;
font-size: 16px;
margin-top: 24px;
position: relative;
}
.login-right-ul li div {
margin-top: 6px;
width: 316px;
border-radius: 5px;
background: #eee;
margin-left: 66px;
height: 42px;
}
.login-right-ul li input {
position: absolute;
top: 6px;
left: 102px;
width: 270px;
height: 28px;
border: 1px solid #ccc;
outline-style: none;
text-decoration: none;
border-color: transparent;
border-radius: 4px;
}
.login-right-ul-span {
width: 42px;
height: 42px;
display: inline-block;
background: #eee;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.login-right-li-span {}
.login-right-span {}
.login-right-ul-span img {
width: 20px;
height: 22px;
margin-left: 8px;
margin-top: 10px;
}
.forget {
width: 304px;
justify-content: space-between;
margin-left: 70px;
margin-top: 10px;
font-size: 13px;
}
.forget-immediately {
float: right;
}
.forget-remember {
float: left;
padding-left: 20px;
color: #333333;
font-weight: 500;
}
.forget-immediately span {
padding: 0 1px;
}
.forget-immediately-pass {
color: #fd9801;
cursor: pointer;
}
.forget-immediately-span {
color: #009688;
}
.forget-immediately-rem {
color: #019587;
cursor: pointer;
}
.errors {
height: 20px;
font-size: 12px;
color: red;
margin-left: 69px;
margin-top: 8px;
}
.knob {
width: 400px;
margin-top: 25px;
}
.knob-abolish {
background: #fff;
width: 88px;
height: 40px;
line-height: 40px;
text-align: center;
color: #000;
text-decoration: underline;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-radius: 5px;
margin-left: 178px;
margin-right: 20px;
cursor: pointer;
}
/*.knob-login {
width: 195px;
height: 42px;
margin-left: 8px;
border-radius: 8px;
background: #009688;
color: #fff;
font-size: 20px;
font-weight: 500;
}*/
.err {
height: 20px;
font-size: 14px;
margin-right: 66px;
color: red;
float: right;
margin-top: -20px;
}
.knobs {
margin-top: 15px;
}
#inputs::-webkit-input-placeholder {
color: #B4BCCC;
}
</style>
2.1、store-vuex
src\store\index.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
count: 123,
isTrue: true,
isFalse: true,
siteId: sessionStorage.getItem("siteId"), //专区Id
newsNumber: "", //消息数
doubleNum: 1, //history回退
navIndex: "", //导航索引
navs: [], //导航菜单
userName: sessionStorage.getItem("userName"), //用户名
userType: sessionStorage.getItem("userType"), //用户类型
companyType: sessionStorage.getItem("companyType"), //用户角色
accountName: sessionStorage.getItem("accountName"), //
manualSync: sessionStorage.getItem("manualSync"), //
prefectureCode:sessionStorage.getItem('prefectureCode'),
ZqName:sessionStorage.getItem('ZqName'),
childMeunId:sessionStorage.getItem('childMeunId'),
fromRoute:'',
navsList:[]
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
changeUserName() {
this.userName = sessionStorage.getItem('userName')
},
getUserType() {
this.userType = sessionStorage.getItem('userType')
},
setCompanyType() {
this.companyType = sessionStorage.getItem('companyType')
},
getAccountName() {
this.accountName = sessionStorage.getItem('accountName')
},
getManualSync() {
this.manualSync = sessionStorage.getItem('manualSync')
},
getSiteId() {
this.siteId = sessionStorage.getItem('siteId')
},
getPrefectureCode() {
this.prefectureCode = sessionStorage.getItem('prefectureCode')
},
getZqName() {
this.ZqName = sessionStorage.getItem('ZqName')
},
getChildMeunId(){
this.childMeunId = sessionStorage.getItem('childMeunId')
},
//从专区获取的id存储在state中
// getId: function (state, id) {
// state.siteId = id || 0;
// },
}
})
src\utils\utils.js
/*
*
* CookieSet name是字段 value是值 days是天数
*
* */
export function CookieSet(name, value, days) {
let d = new Date();
d.setTime(d.getTime() + days * 24 * 3600 * 1000);
let cookieData = name + "=" + value;
let isAddSecure = false;
cookieData += "; expires=" + d.toUTCString();
cookieData += "; path=" + "/";
cookieData += isAddSecure ? "; secure=true" : "";
document.cookie = cookieData;
}
/*
*
* CookieGet name是字段 返回一个取到的value值
*
* */
export function CookieGet(name) {
let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"),
r = document.cookie.match(reg);
return r ? decodeURIComponent(r[2]) : null;
}
/*
*
* CookieRemove name是字段 删除这个cookie
*
* */
export function CookieRemove(name) {
CookieSet(name, null, -1);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
