登录和注册（三）01登录页——原生loading、setItem设置session、store.commit使用vuex、原生http.post请求、removeAttribute()删除html属性

登录和注册（三）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>账&nbsp;&nbsp;&nbsp;号</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>密&nbsp;&nbsp;&nbsp;码</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()">登&nbsp;&nbsp;&nbsp;&nbsp;录</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()">登&nbsp;&nbsp;&nbsp;&nbsp;录</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, "0453f1d34ffd6489c41c8ffba7a604e48097edc794fc9b6d7df064f081f72d9bdc592db2fcc8ce67969bb9227d1ac04ac45bb35424" )); 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), "045305e570ba7c50795aadfeb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942bf9b3614a658aa5921c0920bacf6a3070e007bf217d70") 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 = "0453f1d34ffd6489c41c8ffba7a604e48097edc794fc9b6d7df064f081f72d9bdc592db2fcc8ce67969bb9227d1ac04ac45bb35424"; 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: #; 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); } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/10682.html