Vueのログインとログアウトの詳細な説明

{
    パス:'/login',
    名前:"ログイン",
    コンポーネント:ログイン、
    メタ:{
      ログイン:true
    }
} 
  // ログインが必要な場所で meta-true を定義して、ログインが必要かどうかを確認します。if(to.matched.some(item=>item.meta.login)){//ログインが必要です。console.log("ログインが必要です");
    if(isLogin){//1. すでにログインしている場合は、直接渡します if(data.error===400){//バックエンドはログインに失敗したことを伝えます next({name:'login'})
            localStorage.removeItem('トークン');
            戻る;
        }
        if(to.name==='ログイン'){
            次へ({name:'ホーム'})
        }それ以外{
            次（）
        }
        戻る;
    }
    if(!isLogin && to.name==='login'){//2. ログインしていないが、ログインページに進む next()
    }
    if(!isLogin && to.name !=='login'){//3. ログインしていない、ログインページではない next({name:"login"})
    }
   }else{//ログインする必要はありません。直接次へ進みます()
   }

 <div class="ログインセクション">
    <!-- :rules="ルール" -->
    <el-フォーム
      ラベル位置="上"
      ラベル幅="100px" クラス="demo-ruleForm"
      :rules="ルール"
      :model="ルールから"
      ステータスアイコン
      ref="ルール元"
    >
      <el-form-item label="ユーザー名" prop="名前">
        <!-- v-model を使用してユーザーが入力した名前を取得します -->
        <el-input type="text" v-model="rulesFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="パスワード" prop="パスワード"></el-form-item>
        <!-- v-model を使用してユーザーが入力したパスワードを取得します -->
        <el-input type="password" v-model="rulesFrom.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 送信イベントを定義する -->
        <el-button type="primary" @click="submitFrom('ruleFrom')">送信</el-button>
        <el-button>リセット</el-button>
      </el-form-item>
    </el-form>
  </div>

ルールFrom:{
        名前：''、
        パスワード：''
      },
      ルール:
        名前：[
          // 検証ルール {required:true,message:'ユーザー名を入力してください',trigger:'blur'},
          {min:1,max:5,message:'長さは 1 文字から 5 文字です',trigger:'blur'}
        ]、
        パスワード：[
          {required:true,message:'パスワードを入力してください',trigger:'blur'},
          {min:1,max:5,message:'長さは 1 文字から 5 文字です',trigger:'blur'}
        ]
      }

 // 送信をクリックすると、フォーム内のすべての情報を取得するメソッドがトリガーされます。submitFrom(formName){
      this.$refs[formName].validate( (valid)=>{
        if(有効){
          // 検証に合格すると、ユーザー情報とパスワードがバックエンドに返されます login({
            名前:this.rulesFrom.name、
            パスワード:this.rulesFrom.password,
          }).then((データ)=>{
            コンソールにログ出力します。
            if(データコード===0){
              localStorage.setItem('トークン',data.data.token)
              ウィンドウの場所.href='/';
            }
            if(データコード===1){
              this.$message.error(データ.メッセージ)
            }
          })
        }それ以外{
          console.log('送信エラー!!');
          偽を返す
        }
      })
    }

const トークン = localStorage.getItem('トークン');
// ! ！トークンはブール型に変換されます const isLogin=!!token;
// ルートに入るときは、トークンをバックエンドに返して、それが正当かどうかを確認する必要があります。const data = await userInfo();
    Store.commit('chageUserInfo',data.data)