VUEはトークンログイン認証を実装

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
 
Vue.js で Vuex をビルドします。
 
デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
    トークン: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  突然変異:
    setToken (状態、トークン) {
      state.token =トークン;
      localStorage.setItem("token",token.token); //トークンを保存する
    },
    delToken(状態) {
      状態.トークン = '';
      localStorage.removeItem("token"); //トークンを削除
    }
  }
})

<input type="text" v-model="username" placeholder="ユーザー名" />
<input type="password" v-model="password" placeholder="password"/>

<スクリプト>
  'vuex' から { mapMutations } をインポートします。
  エクスポートデフォルト{
    名前: "managerLogin",
    データ（） {
      戻る {
        ユーザー名:'', //ユーザー名パスワード:'', //パスワード};
    },
    方法:{
      ...mapMutations(['setToken'])、
      ログイン:関数() {
        if (this.username === '' || this.password === '') {
          alert("アカウントまたはパスワードは空にできません!");
        }
        それ以外 {
          //APIインターフェースに従ってトークンを取得します
          this.$ajax.get('http:///api/wx/Public/login', {
            params: { //受信パラメータ username: this.username、password: this.password、device_type: "mobile"
            }
          }）。それから（
            解像度 => {
              コンソールにログ出力します。
              if(res.data.code===1) { //code=1 の場合、検証は成功です this.setToken({token: res.data.data.token}); //ストアにトークンを割り当てるメソッド this.$router.push('/managerHome');
              }
              それ以外{
                alert(res.data.msg); //ポップアップエラーメッセージ}
            }).catch(エラー => {
            alert('インターフェース接続エラー');
            コンソール.log(エラー);
          });
 
        }
      }
  }
</スクリプト>

<スクリプト>
    「vuex」から {mapMutations} をインポートします。
    エクスポートデフォルト{
      名前: "manager_infor",
      方法:{
        ...mapMutations(['delToken'])、
        終了:関数(){
          this.delToken({トークン:''});
          this.$router.push('/managerLogin');
        }
      }
    }
</スクリプト>

router.beforeEach((to, from, next) => {
  if (to.path === '/managerLogin') { //ジャンプ先のページがログインインターフェースの場合 next(); //直接ジャンプ}
  else if (to.path === '/managerHome'){ // ジャンプ先のページが個人用インターフェースの場合 let token = localStorage.getItem('token'); // ローカルに保存されているトークン値を取得します if (token===null||token===''){ // トークンが空の場合、検証は失敗し、ログイン ページにジャンプします next('/managerLogin');
    }
    else{ //空でない場合、検証は成功です next();
    }
  }
  それ以外{
    次（）;
  }
});
 
デフォルトルーターをエクスポートします。

「axios」からaxiosをインポートします。
'./store/main' からストアをインポートします。
Vue.prototype.$ajax = axios
 
新しいVue({
  el: '#app',
  ルーター、
  store, //store に追加する必要があるコンポーネント: { App },
  テンプレート: '<App/>'
})
 
//リクエストインターセプター axios.interceptors.request.use(config => {
// トークンが存在するかどうかを確認します。存在する場合は、各ページのヘッダーにトークンを追加します。
  （ストアの状態トークン）{
    
    config.headers.common['XX-Token']=store.state.token //ここでのXX-Tokenは、ログインインターフェースのリクエストヘッダーの名前に従って記述する必要があります}
 
  設定を返します。
}, エラー => {
// リクエストエラー return Promise.reject(error);
});
 
//レスポンスインターセプター axios.interceptors.response.use(
  レスポンス => {
    応答を返します。
  },
  
  error => { //デフォルトでは、2XX以外のすべてのエラーがエラーとみなされます if (error.response) {
      スイッチ(エラー.レスポンス.ステータス){
        ケース401:
          this.$store.commit('delToken');
          router.replace({ //ログインページパスにジャンプ: '/managerLogin',
            query: { redirect: router.currentRoute.fullPath } // リダイレクトされたルート パスをパラメーターとして受け取り、ログインが成功した後にルートにジャンプします});
      }
    }
    Promise.reject(error.response); を返します。
  }
);