還是那句話，網上找個完整的部落格真的難，實現效果全靠摸索啊

第一步：安裝axios 、vuex      npm i -s axios      npm i -s vuex   執行這兩句  ，vue等環境搭建就不廢話了

第二步：配置main.js檔案  

上圖不上碼，菊花萬人捅，附上程式碼

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import locale from 'iview/dist/locale/en-US';
import VueParticles from 'vue-particles';
import axios from 'axios' ;
import Vuex from 'vuex' //引入狀態管理

Vue.use(VueParticles) ;
Vue.use(iView, { locale });
Vue.config.productionTip = false ;
Vue.prototype.$http = axios ;
Vue.use(Vuex) ;


const ADD_COUNT = 'ADD_COUNT'; // 用常量代替事件型別，使得程式碼更清晰
const REMOVE_COUNT = 'REMOVE_COUNT';
//註冊狀態管理全域性引數
var store = new Vuex.Store({
  state:{
    token:'',
    userID:'',
  },
  mutations: {
    //寫法與getters相類似
    //元件想要對於vuex 中的資料進行的處理
    //元件中採用this.$store.commit('方法名') 的方式呼叫，實現充分解耦
    //內部操作必須在此刻完成(同步)
    [ADD_COUNT] (state, token) { // 第一個引數為 state 用於變更狀態 登入
      sessionStorage.setItem("token", token);
      state.token = token;
    },
    [REMOVE_COUNT] (state, token) { // 退出登入

      sessionStorage.removeItem("token", token);

      state.token = token;
    },
  }
});


router.beforeEach((to, from, next) => {
  iView.LoadingBar.start();//loadong 效果

  store.state.token = sessionStorage.getItem('token');//獲取本地儲存的token

  if (to.meta.requireAuth) {  // 判斷該路由是否需要登入許可權
    if (store.state.token !== "") {  // 通過vuex state獲取當前的token是否存
     next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 將跳轉的路由path作為引數，登入成功後跳轉到該路由
      })
    }
  }
  else {
    next();
  }
})

router.afterEach(route => {
  iView.LoadingBar.finish();
});


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //註冊元件
  components: { App },
  template: '<App/>'
}) ;



 

第三步：進行登入 操作，呼叫main.js 中定義好的修改token的方法[ADD_COUNT]

附上請求部分程式碼

this.$http({
  method: 'get',
  url: '/api/login',
}).then(function(res){
  var json = res.data
  console.log(json.data);
  this.$Message.success('Success!');

  this.$store.commit('ADD_COUNT', json.data.token);

  let clock = window.setInterval(() => {
    this.totalTime-- ;
    if (this.totalTime < 0) {
      window.clearInterval(clock) ;
      this.$Loading.finish();
      this.$router.push('/') ;

    }
  },1000)
}.bind(this)).catch(function(err){
  this.$Message.error('登入失敗，錯誤：'+ err);
  this.$Loading.error();
}.bind(this))
 

差點忘記了一點，在router中要配置需要驗證是否登入的請求

附上router/index.js  程式碼

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/Login'
import P404 from '@/components/404/404'
import Main from '@/components/Main'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',//登入頁
      name: 'Login',
      component: Login
    },
    {
      path: '/',//首頁
      name: 'Main',
      component: Main,
      meta: {
        requireAuth: true,  // 新增該欄位，表示進入這個路由是需要登入的
      },
    },
    { path: '*', component: P404 }  //這裡是保證錯誤地址會跳轉到404介面進行提示
  ]
})


 

這些方法的編寫順序可能沒有體現出來，不過最終效果就是這個了，如果有疑問歡迎留言

將會盡快回復您