Vue はトークンを取得してトークン ログインのサンプル コードを実装します

// store.js で、mutation でトークンを追加および削除するメソッドを追加します。import Vue from 'vue'
'vuex' から Vuex をインポートします
Vue.use(Vuex)

const state = { // グローバルに管理されるデータストレージ isLogin:'0',
	 ser:null、
	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'', // トークン
};
デフォルトの新しいVuex.Storeをエクスポートします({
	州、
	getters:{ // データの変更をリッスンする getStorage(state){ // ローカルに保存されているログイン情報を取得する if(!state.token){
	        state.token = JSON.parse(localStorage.getItem(キー))
	      }
	      state.tokenを返す
	    }
	},
	突然変異:
		$_setToken(state, value) { // ストレージトークンを設定する
	        状態.トークン = 値;
	        localStorage.setItem('トークン', 値);
	    },
	    $_removeStorage(state, value){ // トークンを削除
		      localStorage.removeItem('トークン');
	    },
	}
})

// login.vue ページメソッド:{
	ログインFun(){
		this.$api.post('リクエストされたバックエンドインターフェースリンク',{
				データ：{
					userId:this.user, // ログイン名 userPwd:this.psw, // ログインパスワード }
		}).then((res) => {
			res.data.status == 200の場合{
				var userInfo = res.data.data;
				this.$store.commit('$_setToken', userInfo.token);
				Toast({ message: 'ログイン成功', type: 'success', duration: 1500}); // UI ポップアップ ウィンドウ プロンプト this.$router.push({ name:'homePage' }); // ホームページにジャンプ } else {
				Toast({ message: res.data.message, duration: 1500}); // UI ポップアップ ウィンドウ プロンプト }
		})
	}
}

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./router/router' からルーターをインポートします
'./store/store' からストアをインポートします

import PublicFun from './utils/publicFun' // パブリックメソッド import './mintUi' // 必要に応じて mintUi コンポーネントをインポートします。必要に応じて、mintUi.js で構成します。 import '@/assets/mui/css/mui.css' // mui.css スタイル /* axios プラグインをインポートします */
'axios' から axios をインポートします
Vue.prototype.$http = axios;

// グローバルルーティングコンストラクター。ログインしてページにジャンプするかどうかを決定します。router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) { // ログインが必要 if(window.localStorage.token && window.localStorage.isLogin === '1'){
      次（）
    } そうでない場合 (to.path !== '/login') {
      トークンを window.localStorage.token とします。
      if (トークン === 'null' || トークン === '' || トークン === 未定義){
          次へ({パス: '/login'})
          Toast({ message: 'ログインしていないことが検出されました。操作する前にログインしてください!', 期間: 1500 })
      }
    } それ以外 {
      次（）
    }
  } else { // ログインする必要はありません next()
  }
})



//パブリック URL を設定する
Axios.defaults.baseURL = "http://www.sinya.online/api/"
//リクエストインターセプターを追加する axios.interceptors.request.use(
  設定 =>{
    （ストアの状態トークン）{
      config.headers.common['token'] = store.state.token
    }
    設定を返します。
  },
  エラー =>{
    //リクエストエラーが発生した場合の対処方法 return Promise.reject(error);
  })

//http レスポンス インターセプター axios.interceptors.response.use(
  応答 =>{
    応答を返します。
  },
  エラー=>{
    if (エラー.応答) {
      スイッチ(エラー.レスポンス.ステータス){
        ケース401:
          localStorage.removeItem('トークン');
          ルータ.replace({
            パス: '/views/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
  })

Vue.prototype.$publicFun = PublicFun // グローバル パブリック メソッドをマウント Vue.prototype.$apps = Apps // app.js パブリック メソッド Vue.config.productionTip = false

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount('#app')

returnFun(){ // ログアウト MessageBox.confirm(this.lang.logoutTip).then(action => {
	     this.$store.commit('$_removeStorage'); // ログイン情報をクリアする this.$router.push({
	         名前:'ログイン'
	     });
	     トースト({message:this.lang.logoutSuccess, 期間: 1500});
	 }).catch(()=>{})
}