Vueプロジェクトでのトークン検証ログイン（フロントエンド部分）

Vue フォーム 'vue' をインポートします。
'vuex' から Vuex をインポートします。

Vue.js で Vuex をビルドします。

定数ストア = 新しい Vuex.Store({
 州： {
  トークン: localStorage.getItem('token') ? localStorage.getItem('token') : ''
 },
 ミューテーション:
  setToken (状態、トークン) {
   state.token =トークン;
   localStorage.setItem("トークン",token.token);
  },
  delToken(状態) {
   状態.トークン = '';
   localStorage.removeItem("トークン");
  }
 }
})

デフォルトストアをエクスポートします。

npm インストール vuex --save

localStorage.setItem("トークン",token.token);

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'axios' から axios をインポートします
'es6-promise' から promise をインポートします
'./store/index' からストアをインポートします
promise.polyfill()

Vue.use(要素UI)
Vue.config.productionTip = false
 

axios.defaults.baseURL = 'http://192.168.80.152:8088'
axios.defaults.headers.post['Content-Type'] = "application/json"
axios.defaults.withCredentials = true
axios.defaults.headers.common['Authorization'] = store.state.token
Vue.prototype.$axios = axios
 

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
});

// リクエストインターセプターを追加 axios.interceptors.request.use(config => {
// リクエストを送信する前に行うべきこと // トークンが存在するかどうかを確認し、存在する場合は各ページヘッダーにトークンを追加します
  （ストアの状態トークン）{
    config.headers.common['Authorization']=store.state.token.token
  }

  設定を返します。
}, エラー => {
// リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// http レスポンス インターセプター axios.interceptors.response.use(
  レスポンス => {

    応答を返します。
  },
  エラー => {

    if (エラー.応答) {
      スイッチ (エラー.応答.ステータス) {
        ケース401:
          this.$store.commit('del_token');
          ルータ.replace({
            パス: '/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
    Promise.reject(error.response.data) を返します。
  });

'./store/index' からストアをインポートします

新しいVue({
  el: '#app',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
});

// リクエストインターセプターを追加 axios.interceptors.request.use(config => {
// リクエストを送信する前に行うべきこと // トークンが存在するかどうかを確認し、存在する場合は各ページヘッダーにトークンを追加します
  （ストアの状態トークン）{
    config.headers.common['Authorization']=store.state.token.token
  }

  設定を返します。
}, エラー => {
// リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// http レスポンス インターセプター axios.interceptors.response.use(
  レスポンス => {

    応答を返します。
  },
  エラー => {

    if (エラー.応答) {
      スイッチ (エラー.応答.ステータス) {
        ケース401:
          this.$store.commit('del_token');
          ルータ.replace({
            パス: '/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
    Promise.reject(error.response.data) を返します。
  });

router.beforeEach((to, from, next) => {
  if(to.path === '/login') {
    次（）;
  } それ以外 {
    トークンを localStorage.getItem('token') にします。
    if(トークン === 'null' || トークン === '') {
      次へ('/ログイン');
    }それ以外 {
      次（）;
    }
  }
});

//このコンポーネントのエクスポートのデフォルトに何かを導入します。スクリプトタグ import { mapMutations } from 'vuex';
//これはメソッド部分です。メソッド: {

      ...mapMutations(['setToken'])、
      ログイン(フォーム){


        _this = this とします。
        if(form.phone === "" || form.password === ""){
          _this.$message.error("電話番号またはパスワードを入力してください");
        }それ以外 {
          this.$axios.post(`/user/check/login`,_this.form).then(res => {
            var コード = res.data.code;
            var mes = res.data.message;
            if(コード === 1){
             /* storage.setItem("token",res.data.data);
              _this.token = res.data.data;*/
             // _this.setToken({認証: _this.token})
             // console.log("成功");
              _this.$message.success('ログインに成功しました');
              _this.token = res.data.data;
              _this.setToken({トークン: _this.token});
              _this.$router.push({path:"/home"});

              var ストレージ = window.localStorage;
              //アラート(storage.getItem("トークン"));

              if(this.$store.state.token) {
                this.$router.push('/home');
                console.log(this.$store.state.token.token);
              } それ以外 {
                this.$router.replace('/login');
              }

            }それ以外{
              _this.$message.error(mes);
            }
          }).catch(関数(err){
            コンソールログ(エラー);
            _this.$message.error("ログインエラーです。プログラム開発者に連絡してください!!");

          })
        }

      }
     }

_this = this とします。

 _this.setToken({トークン: _this.token});

...mapMutations(['setToken'])、