Vueはユーザーログインとトークン検証を実装します

<テンプレート>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="ユーザー名"/>
    <input type="text" v-model="loginForm.password" placeholder="パスワード"/>
    <button @click="login">ログイン</button>
  </div>
</テンプレート>
 
<スクリプト>
'vuex' から { mapMutations } をインポートします。
エクスポートデフォルト{
  データ （） {
    戻る {
      ログインフォーム: {
        ユーザー名: ''、
        パスワード: ''
      },
      ユーザートークン: ''
    };
  },
 
  メソッド: {
    ...mapMutations(['changeLogin'])、
    ログイン（） {
      _this = this とします。
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('アカウントまたはパスワードは空にできません');
      } それ以外 {
        this.axios({
          メソッド: 'post'、
          URL: '/user/login',
          データ: _this.loginForm
        }).then(res => {
          コンソールにログ出力します。
          _this.userToken = 'Bearer' + res.data.data.body.token;
          // ユーザートークンを vuex_this.changeLogin({ Authorization: _this.userToken }); に保存します。
          _this.$router.push('/home');
          alert('ログインに成功しました');
        }).catch(エラー => {
          alert('アカウントまたはパスワードエラー');
          コンソール.log(エラー);
        });
      }
    }
  }
};
</スクリプト> 

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
Vue.js で Vuex をビルドします。
 
定数ストア = 新しい Vuex.Store({
 
  州： {
    //トークンを保存
    認証: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  突然変異:
    // トークンを変更し、localStorage に保存します
    changeLogin (状態、ユーザー) {
      状態.承認 = ユーザー.承認;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});
 
デフォルトストアをエクスポートします。

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
'@/components/login' からログインをインポートします。
'@/components/home' から home をインポートします。
 
Vue.use(ルーター);
 
const router = 新しいルーター({
  ルート: [
    {
      パス： '/'、
      リダイレクト: '/login'
    },
    {
      パス: '/login',
      名前: 'ログイン',
      コンポーネント: ログイン
    },
    {
      パス: '/home',
      名前: 'ホーム',
      コンポーネント: ホーム
    }
  ]
});
 
// ナビゲーションガード // router.beforeEach を使用してグローバルフロントガードを登録し、ユーザーがログインしているかどうかを判断します router.beforeEach((to, from, next) => {
  to.path === '/login'の場合{
    次（）;
  } それ以外 {
    トークンを localStorage.getItem('Authorization') に設定します。
 
    if (トークン === null || トークン === '') {
      次へ('/ログイン');
    } それ以外 {
      次（）;
    }
  }
});
 
デフォルトルーターをエクスポートします。

// リクエストインターセプターを追加し、リクエストヘッダーにトークンを追加します
axios.interceptors.request.use(
  設定 => {
    localStorage.getItem('Authorization') の場合
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    設定を返します。
  },
  エラー => {
    Promise.reject(error) を返します。
});

localStorage.removeItem('承認');
this.$router.push('/login');