When logging in, process the data in the vuex corresponding file: store—— index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { userInfo: Void, userData: null, refreshMark: null, searchTitle: null,} { getUserInfo(state) { return state.userInfo }, getUserName(state) { return state.userData }, getRefresh(state){ return state.refreshMark }, getSearchTitle(state){ return state.searchTitle } }, 2. open the door for mutations // Open the door for mutations { setSearchTitle(state, payload){ state.searchTitle = payload }, setUserInfo(state, payload) { state.userInfo = payload.userInfo }, setUserName(state, payload){ state.userData = payload }, setRefresh(state, payload){ state.refreshMark = payload } } })Copy the codeLogin. vue Part of the login code
<template> <div class="login-container"> < H1 >CY</ H1 > < H3 > XXXXXXX Management system </ H3 > <! -- @ keyup. Enter. Native: <el-input class="input" type="text" placeholder=" @keyup.enter.native="onClickLogin" V-model ="username" /> <el-input class="input" type="password" show-password placeholder=" @keyup.enter.native="onClickLogin" v-model="userpwd" /> <el-button class="login-button" type="primary" </el-button> </div> </template> <script> import Util from '.. /.. /Util/Util.js' import httpUtil from '.. /.. /Util/httpUtil.js' import qs from 'qs' import store from '.. /.. /store' export default { data () { return { username: '', userpwd: '' } }, components: {}, computed: {}, mounted() {// Let token = sessionStorage.getitem ('userName'); if (token == null || ! Token) {console.log(" empty "); } else { this.$router.replace('/Home'); } }, methods: { onClickLogin(){ let { username, userpwd } = this.$data console.log(username) if(! username || ! Userpwd){this.$message.warning(' User name or password cannot be empty ') return false} DeviceId} = Util. GetAuthorizationInfo () / / through the commit method submitted to the mutation this.$store.com MIT (' setRefresh ', "1") / / request console login interface. The log (userpwd) enclosing httpRequest. HttpPostRequest ('/adminLogin/login '{username: the username and password: userpwd, }). Then ((res) => {if(res.data.code == 20000){this.$message. Success (' login ') sessionStorage.setitem ('userName', res.data.data.name); sessionStorage.setItem('userinfo', JSON.stringify(res.data.data.authorities[0])) this.$router.push({ name:'Home' }) console.log(this.$route.path) } else { Error (res.data.message)}}). Catch ((error) => {console.log(error) this.$message.error(' Network error, please try again later ')})} } } </script>Copy the codeEncapsulation of Util. Js
Import XLSX from 'XLSX'; import XLSX from 'XLSX'; import XLSX from 'XLSX'; import XLSX from 'XLSX'; // deviceId let deviceId = "; Export default class Util {// Check for signature static checkSecurity() {let tSignature = sessionstorage.getitem ("signature"); return tSignature; Excle static exportExcle(exportArray, filename = 'default ') {let tSheet = xlsx.utils.aoa_to_sheet (exportArray); let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, tSheet, "SheetJS"); XLSX.writeFile(wb, `${filename}.xls`); } // Static antiShake(callback, callback) time) { if (antiShakeId) { clearTimeout(antiShakeId) } antiShakeId = setTimeout(callback, time); } / / authentication related information static getAuthorizationInfo () {/ / request authentication conversion base64 let tStr = "broadtree: CgG8tpmnHVfZD8jl"; // Generate random device id if (! deviceId) { deviceId = Util.getRandomCode(); } return { authorization: btoa(tStr), deviceId: DeviceId}} / / static random string getRandomCode () {let tString = [' A ', 'B', 'C', 'D', 's', 'w', 'y', 'k', 'R' and 'q', 'm']. let tCode = ''; for (let i = 0; i < 10; i++) { tCode += tString[Util.wxRandom(0, 11)]; } return tCode + Date.now(); } static wxRandom(m, n) {var num = math.floor (math.random () * (m-n) + n); return num; }}Copy the code