vueログインブロックとリクエスト/応答ブロック

ログインブロック
ルーティングファイルrouter.jsにstoreを導入する.js

import store from '../store/store'

ログイン権限が必要なルーティングの構成

   {
            path: '/main',
            meta: {
                requireAuth: true //      ，              
            },
            component: (resolve) => require(['../components/main'], resolve)
        },

作成したルーティングの下に、そのルーティングにログイン権限が必要かどうかを判断する

 ...

 router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  //              
    console.log('beforeEach     token      '+store.state.loginModule.token)
    if (store.state.loginModule.token) {  //   vuex state     token    
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  //       path    ，           
      })
    }
  }
  else {
    next();
  }
 });

リクエスト/レスポンスブロック
httpを新規作成します.jsファイル

 import axios from 'axios'
 import store from './store/store'
 import * as types from './store/mutation_type'
 import router from './router/index'

 axios.defaults.timeout = 5000; //     
 //axios.defaults.baseURL = '';

 // http request    
 axios.interceptors.request.use(
    config => {
        if (store.state.token) {  //       token，      ，   http header   token
            config.headers.Authorization = `token ${store.state.loginModule.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

 // http response    
 axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 401   token          
                    store.commit('loginOut');
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
        return Promise.reject(error.response.data)  //            
    });

 export default axios;

そしてmain.jsファイルにhttpを導入する.jsファイル

 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store/store'
 import axios from './http'

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   store,
   axios,
   template: '',
   components: { App }
 })

プロジェクトがelement-ui、httpを使用している場合.jsファイルはこのように書くことができます

//   axios  element ui  loading message  
  import axios from 'axios'
  import { Loading, Message } from 'element-ui'
  //     
  axios.defaults.timeout = 5000
  // http     
  var loadinginstace
  axios.interceptors.request.use(config => {
    // element ui Loading  
    loadinginstace = Loading.service({ fullscreen: true })
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: '    '
    })
    return Promise.reject(error)
  })
  // http     
  axios.interceptors.response.use(data => {//       loading
    loadinginstace.close()
    return data
  }, error => {
    loadinginstace.close()
    Message.error({
      message: '    '
    })
    return Promise.reject(error)
  })

  export default axios

vue怠け者ロード

     {
      path: '/login',
      component: (resolve) => require(['../components/login'], resolve)
     }

vueページがリフレッシュされると、情報が空になります.
ルーティングファイルrouter.jsにmutation_を導入typeファイル

  import * as type from '../store/mutation_type'

ページのリフレッシュ時にtokenを再割り当て

   //      ，    token
  if (window.localStorage.getItem('token')) {
    store.commit('loginIn', window.localStorage.getItem('token')); //   token       
  }