Vueプロジェクトは、ユーザーのログインを維持します（localStorage + vuexがページを更新した後も状態は維持されます）

フロントエンドのプロジェクト開発では、ユーザーのログインおよび登録機能を実装する際に問題が発生することがよくあります。つまり、ブラウザページが更新されると、設定したログイン状態が消えます。これは、実際にはユーザー状態を保存しなかったためです。

ここで、ポニーのデモはlocalStorage + vuexメソッドを使用しています（sessionStorage、cookiesなどの他の使用法は同じですが、機能は異なります）。

1.効果を実現する

実装された機能：ユーザーが正常にログインした後、ブラウザーページを更新するか、ブラウザーを閉じてページを再度開いた後、ユーザーがクリックしてログアウトするまで、ログインステータスは保持されます。

2.実装手順と関連するキーポイント

1.まず、空のオブジェクトuserInfo {}をvuexのstate属性に追加して、ログイン後のユーザーの状態を保存します。

関係するキーポイント：

state属性（state）は、vueのデータと同様に、複数のコンポーネントによって共有される変数を追加するために使用されます。

2.ログインページで、ログインが成功したと判断した後、オブジェクトuserInfo {}を作成し、ログインステータスを説明するさまざまな属性を追加して、オブジェクトをそれぞれlocalStorageとvuexに保存します。

関係するキーポイント：

localStorageプロパティは、ドキュメントソースのストレージオブジェクトへのアクセスを許可します。保存されたデータはブラウザセッションに保持されます。

sessionStorageとの唯一の違いは、localStorageは手動でクリアしない限り永続ストレージに属し、sessionStorageは一時ストレージに属し、ブラウザを閉じると空になります。

：： LocalStorage.setItem（'myCat'、'Tom'）;

取：var cat = localStorage.getItem（ "myCat"）;

删：localStorage.removeItem（ "myCat"）; またはlocalStorage.clear（ "myCat"）;

JSON.stringify（）はオブジェクトをシリアル化し、返されたオブジェクト型を文字列型に変換します。

this。$store.stateは、次のようなvuexの状態のプロパティを取得します。

this。$store.state.userInfo= userInfo // vuexでuserInfoを取り出し、新しいuserInfoに割り当てます

3.マウント段階で、ログインステータスuserInfoを決定します。関連するプロパティを設定した後、ログインステータスを正常に保存できます。

localStorageは永続的に保存されるため、localStorageデータを手動でクリアしない限り、ブラウザを閉じてWebページを再度開いてもログインステータスは保持されます。

4.localStorageでログアウトを設定してデータをクリアします。

5.関数を実装します。

第三に、関連するコード

vuex（store / index.js）

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;//显示普通用户登录信息
        }
      }
    }

ヒント：ポニーはvue + Element UIを使用し、他のテクノロジーを使用する場合はコードが異なる場合がありますが、考え方は同じです。