VUEは登録とログインの効果を実現します

<テンプレート>
  <div class="ログインセクション">
    <el-フォーム 
      ラベル位置="上" ラベル幅="100px" クラス="demo-ruleForm"
      :rules="ルール"
      :model="ルールフォーム"
        ステータスアイコン
        ref="ルールフォーム"
    >
      <el-form-item label="ユーザー名" prop="名前">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="パスワード" prop="パスワード">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
 
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" >送信</el-button>
        <el-button >リセット</el-button>
      </el-form-item>
 
    </el-form>
  </div>
</テンプレート>
<スクリプト>
'@/service/api' から {register} をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      ルールフォーム:{
        名前：''、
        パスワード：''
      },
      ルール:
        名前：[
          {required:true,message:'名前を入力してください',trigger:"blur"},
          {最小:1、最大:5、メッセージ:"長さ 3-5"、トリガー:"ぼかし"}
        ]、
        パスワード：[
          {required:true,message:'パスワードを入力してください',trigger:"blur"},
          {最小:3、最大:5、メッセージ:"長さ 3-5"、トリガー:"ぼかし"}
        ]
      }
    };
  },
  メソッド: {
    送信フォーム(フォーム名){
      this.$refs[フォーム名].validate((valid)=>{
          if(有効){
              //チェックに合格したら、ユーザー名とパスワードをバックエンドに送信します。register({
                名前: this.rulesForm.name,
                パスワード: this.rulesForm.password,
              }).then((データ)=>{
                コンソール.log(データ)
                if(データコード === 0){
                  localStorage.setItem('token',data.data.token);
                    window.location.href='/';
                }
                if(データコード === 1){
                  this.$message.error(データ.メッセージ)
                }
              });
          }それ以外{
            console.log("送信エラー!!");
            false を返します。
          }
      });
    }
  }
}
</スクリプト>
 
<style lang="スタイラス">
.ログインセクション
  パディング 0px 20px
</スタイル>

<テンプレート>
  <div class="ログインセクション">
    <el-フォーム
      ラベル位置="上"
      ラベル幅="100px" クラス="demo-ruleForm"
      :rules="ルール"
      :model="ルールフォーム"
        ステータスアイコン
        ref="ルールフォーム"
    >
      <el-form-item label="ユーザー名" prop="名前">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="パスワード" prop="パスワード">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">送信</el-button>
        <el-button>リセット</el-button>
      </el-form-item>
    </el-form>
  </div>
</テンプレート>
<スクリプト>
'@/service/api' から {login} をインポートします。
 
エクスポートデフォルト{
  データ（） {
    戻る {
      //データを格納するオブジェクトrulesForm:{
        名前：''、
        パスワード：''
      },
      ルール:
        名前：[
          {required:true,message:'名前を入力してください',trigger:"blur"},
          {最小:1、最大:5、メッセージ:"長さ 3-5"、トリガー:"ぼかし"}
        ]、
        パスワード：[
          {required:true,message:'パスワードを入力してください',trigger:"blur"},
          {最小:3、最大:5、メッセージ:"長さ 3-5"、トリガー:"ぼかし"}
        ]
      }
    };
  },
  メソッド: {
    送信フォーム(フォーム名){
      this.$refs[フォーム名].validate((valid)=>{
          if(有効){
              //チェックに合格したら、ユーザー名とパスワードをバックエンドに送信します login({
                名前: this.rulesForm.name,
                パスワード: this.rulesForm.password,
              }).then((データ)=>{
                コンソール.log(データ)
                if(データコード === 0){
                  localStorage.setItem('token',data.data.token);
                    window.location.href='/';
                }
                if(データコード === 1){
                  this.$message.error(データ.メッセージ)
                }
              });
          }それ以外{
            console.log("送信エラー!!");
            false を返します。
          }
      });
    }
  }
}
</スクリプト>
 
<style lang="スタイラス">
.ログインセクション
  パディング 0px 20px
</スタイル>

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
Vue.use(ルーター)
'@/store' からストアをインポートします
'@/service/api.js' から {userInfo} をインポートします。
'@/views/user-login/index.vue' からログインをインポートします。
const router = 新しいルーター({
    モード:"履歴",
    ルート:[
        {
            パス:'/login',
            名前:"ログイン",
            タイトル:"ログインページ",
            コンポーネント:ログイン、
            メタ:{
                ログイン:true
            }
        }
    ]
});
//ルートガード router.beforeEach( async (to,from,next) => {
    /*
        一部のルートではログインが必要です。ログイン状態を判定するには 1. ログインしていません: ログインページにジャンプします 2. ログイン: 直接入力します 一部のルートではログインは必要ありません。直接入力します ps: ログインするかどうか --meta
    */
    const トークン = localStorage.getItem('トークン');
    const isLogin = !!トークン;
    //ルートに入るときは、それが正当かどうかを確認するためにバックエンドにトークンを送信する必要があります。const data = await userInfo();
    Store.commit('chageUserInfo',data.data)
 
   if(to.matched.some(item => item.meta.login)){//ログインが必要ですconsole.log("ログインが必要です");
 
        if(isLogin){//すでにログインしている場合は直接渡します。if(data.error === 400){//バックエンドはログインに失敗したことを通知します。next({name:'login'});
                localStorage.removeItem('トークン');
                戻る;
            }
            if(to.name === 'ログイン'){
                次へ({name:'home'});
            }それ以外{
                次（）;
            }
            戻る;
        }
        if(!isLogin && to.name === 'login'){//ログインしていませんが、ログインページに移動します next();
        }
        if(!isLogin && to.name !== 'login'){//ログインしていない、ログインページではない next({name:'login'});
        }
   }それ以外{
       次（）;
   }
})
デフォルトルーターをエクスポートします。