登录的时候，在vuex对应的文件里面处理好数据：store------》index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: null,
    userData: null,
    refreshMark: null, 
    searchTitle: null,
  },
  //利用getters对state存储的数据进行过滤
  getters: {
    getUserInfo(state) {
      return state.userInfo
    }, 
    getUserName(state) {
      return state.userData
    },
    getRefresh(state){
      return state.refreshMark
    },
    getSearchTitle(state){
      return state.searchTitle
    }
  },
  // 利用mutations改变store的数据（同步的）
  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
    }
  }
})

login.vue登录部分代码

<template>
  <div class="login-container">
    <h1>CY</h1>
    <h3>xxxxxxx管理系统</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" @click="onClickLogin">登录</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("空");
        } else {
            this.$router.replace('/Home');
        }
    },

    methods: {
        onClickLogin(){
            let { username, userpwd } = this.$data
            console.log(username)
            if(!username || !userpwd){
                this.$message.warning('用户名或密码不能为空')
                return false
            }
            //获取身份验证信息和设备id
            let { authorization, deviceId } = Util.getAuthorizationInfo()
            // 通过commit方法提交到mutation
            this.$store.commit('setRefresh', "1")
            //请求登录接口
            console.log(userpwd)
            this.httpRequest.httpPostRequest('/adminLogin/login',{
                username: username,
                password: userpwd,
            }).then((res) => {
                if(res.data.code == 20000){
                    this.$message.success('登录成功')
                    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 {
                    this.$message.error(res.data.message)
                }
            }).catch((error) => {
                console.log(error)
                this.$message.error('网络错误,请稍后重试')
            })
        }
    }
  }

</script>

封装的Util.js

import XLSX from 'xlsx'//xlsx是一个简单的JavaScript插件，读取和写入Excel表格

//防抖函数时间ID
let antiShakeId = 0;
//设备ID
let deviceId = '';

export default class Util {

    //检查有无签名
    static checkSecurity() {
        let tSignature = sessionStorage.getItem("signature");
        return tSignature;
    }

    //导出Excle
    static exportExcle(exportArray, filename = '默认') {
        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, time) {
        if (antiShakeId) {
            clearTimeout(antiShakeId)
        }
        antiShakeId = setTimeout(callback, time);
    }

  //获取身份验证相关信息
  static getAuthorizationInfo() {
    //请求身份认证转换base64
    let tStr = "broadtree:CgG8tpmnHVfZD8jl";
    //生成随机设备id
    if (!deviceId) {
        deviceId = Util.getRandomCode();
    }
    
    return {
      authorization: btoa(tStr),
      deviceId: deviceId
    }
  }

  //随机字符串
  static getRandomCode() {
    let tString = ['A', 'B', 'C', 'D', 's', 'w', 'y', 'k', 'R', '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;
  }
}