Vue專案如何保持使用者登入狀態(localStorage+vuex重新整理頁面後狀態依然保持)

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    userInfo:{}
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

//登入方法
login() {
  //驗證碼的驗證
  var randStr = this.rand.toString().replace(/,/g, ""); //隨機生成的驗證碼為陣列形式，此處將其轉為字串並去掉中間相隔的逗號
  var codeStr = this.code; //使用者輸入的驗證碼
  if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比較使用者輸入的與隨機生成的驗證碼,不區分大小寫
    //獲取登入介面
    axios.post("user/login", {
      name: this.name,
      password: this.password,
      administrator: this.usertyp
    }).then(result => {
      console.log(result.data);
      const code = result.data.code;
      this.token = code;
      if (this.token == 1003) {
        this.$message.error('使用者名稱或密碼未輸入!');
      } else if (this.token == 1001) {
        this.$message.error('登入失敗，請檢查使用者名稱或者密碼是否正確。');
      } else if (this.token == 1005) {
        this.$message.error('您不是管理員，無管理員登入許可權！');
      } else if (this.token == 200) {
        if (this.usertyp == "2") { //管理員登入
          this.$message.success('登入成功！');
          this.dialogFormVisible = false; //登入成功後登入插槽關閉
          this.loginReg = false;//隱藏登入註冊按鈕，顯示歡迎資訊
          this.manage = true;//顯示管理員登入資訊
          let userInfo = {
            isLogin: true,
            manage: true,
            name: this.name
          };
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          console.log('this.$store.state.userInfo', this.$store.state.userInfo)
          setTimeout(() => { //此處必須使用vue函數，否則this無法訪vue範例
            this.$message(`歡迎您，管理員 ${this.name}！`)
          }, 2000);
          console.log(this.usertyp)
        } else if (this.usertyp == "") {  //普通使用者
          this.$message.success('登入成功！');
          this.dialogFormVisible = false; //登入成功後插槽關閉
          this.loginReg = false;//隱藏登入註冊按鈕，顯示歡迎資訊
          this.user = true; //顯示普通使用者登入資訊
          let userInfo = {
            isLogin: true,
            manage: false,
            name: this.name
          }
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          setTimeout(() => { //此處必須使用vue函數，否則this無法訪vue範例
            this.$message(`歡迎您，尊貴的晉之魂使用者 ${this.name}！`)
          }, 2000);
          console.log(this.usertyp)
        }
        this.Cookie.set("UserName", this.name); //將使用者名稱存到cookie
        console.log('登入狀態為：' + this.token);
      }
    })
  } else {
    this.$message.error('請輸入正確的驗證碼');
  }
},

//退出登入
logout() {
  this.Cookie.remove("UserName");
  this.loginReg = true;
  this.manage = false;
  this.user = false;
  this.log_out = false;
  localStorage.clear();
  setTimeout(() => {
    this.$router.push({
      path: '/'
    }, () => {
    }, () => {
    });//退出登入後2秒後跳轉至首頁
  }, 2000)
  //加()=>{},()=>{} 可解決路由重複後臺報錯問題
},

mounted() {
      // 判斷登入狀態
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (null === userInfo) return;
      console.log('userInfo', userInfo.isLogin);
      if (userInfo.isLogin) {
        this.dialogFormVisible = false; //登入成功後插槽關閉
        this.loginReg = false;//隱藏登入註冊按鈕，顯示歡迎資訊
        this.name = userInfo.name;
        if (userInfo.manage) {
          this.manage = true;//顯示管理員登入資訊
        } else {
          this.user = true;//顯示普通使用者登入資訊
        }
      }
    }