axios 拦截 , 页面跳转, token 验证(自己摸索了一天搞出来的)

最近做项目，需要登录拦截，验证。于是使用了axios的拦截器（也是第一次使用，摸索了1天，终于搞出来了，真是太高兴啦！！！），废话不多说，直接上代码，

项目结构：vue-cli + webpack + vue + vue-router + vuex

项目结构截图：

其中src下store文件夹中有两个文件，store.js和type.js，其中store.js为：

/**
 * Created by yuwenjing on 17/9/13.
 */
import Vuex from 'vuex'
import Vue from 'vue'
import * as types from './types'

Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        token: null,
        userName: ''
    },
    mutations: {
        [types.LOGIN]: (state, data) => {
            localStorage.token = data;
            state.token = data;
        },
        [types.LOGOUT]: (state) => {
            localStorage.removeItem('token');
            state.token = null
        },
        [types.USERNAME]: (state, data) => {
            localStorage.userName = data;
            state.userName = data;
        }
    }
})

types.js为：

/**
 * Created by yuwenjing on 17/9/13.
 * vuex types
 */

export const LOGIN = 'login';

export const LOGOUT = 'logout';

export const USERNAME = 'userName'

主要业务代码结构：

 其中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 store from './store/store'
import * as types from './store/types'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
//创建axios实例
var $http = axios.create({});

// http request 拦截器
$http.interceptors.request.use(
  config => {
    if(config.url.indexOf('loginCheck')>=0){
      return config;
    }else{
      if (store.state.token) {
        config.headers.authorization = store.state.token;
      }
      return config;
    }

  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器
$http.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.data.message) {
        case "false":
          // 清除token信息并跳转到登录页面
          store.commit(types.LOGOUT);
          router.replace({
            path: '/'
          })
      }
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    return Promise.reject(error.response.data)
  });

Vue.prototype.$http = $http

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

router文件夹下index.js为：

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import homePage from '@/components/homePage'
import store from '../store/store'
import * as types from '../store/types'

Vue.use(Router)

const routes = [
  {
    path:'/',
    component:login
  },
  {
    path: '/homePage',
    meta: {
      requireAuth: true,
    },
    component: homePage
  }
];

// 页面刷新时，重新赋值token,用户名也在界面上展示
if (window.localStorage.getItem('token')) {
  store.commit(types.LOGIN, window.localStorage.getItem('token'));
}
if(window.localStorage.getItem('userName')){
  store.commit(types.USERNAME, window.localStorage.getItem('userName'));
}

const router = new Router({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (store.state.token) {
      next();
    }
    else {
      next({
        path: '/'
      })
    }
  }
  else {
    next();
  }
})

export default router;

登录界面login.vue代码为：

<template>
  <div class="login-wrapper">
    <!--顶部-->
    <div class="top">
      <span class="content">
        <img src="../../static/img/login_logo.png" class="system-logo">
        <span class="system-name">北京热力面积投停管理系统</span>
      </span>
    </div>
    <!--顶部结束-->

    <!--中部-->
    <div class="center">
      <div class="login">

        <!--中部左侧-->
        <div class="left">
          <img src="../../static/img/login_city.png">
        </div>
        <!--中部左侧结束-->

        <!--中部右侧-->
        <div class="right">


          <span class="login-title">用户登录</span>

          <!--用户名输入-->
          <div class="username-wrapper">
            <i class="username-logo"></i>
            <input type="text" class="username" placeholder="用户名" v-model="username" ref="username" @focus="usernameFocus" :class="{'username-focus': isUsernameFocus}">
          </div>
          <!--用户名输入结束-->

          <!--密码输入-->
          <div class="pwd-wrapper">
            <i class="pwd-logo"></i>
            <input type="password" class="pwd" placeholder="密码" v-model="pwd" ref="pwd" @focus="pwdFocus" :class="{'pwd-focus': isPwdFocus}">
          </div>
          <!--密码输入结束-->

          <!--提交按钮-->
          <button class="login-btn" @click="clickLoginBtn">登录</button>
          <!--提交按钮结束-->
        </div>
        <!--中部右侧结束-->
      </div>
    </div>
    <!--中部结束-->

    <!--底部-->
    <div class="bottom"></div>
    <!--底部结束-->

  </div>
</template>

<script type="text/ecmascript-6">
  import * as types from '../store/types'
  import {SWAGGER_CONFIG} from '../config/config'
  export default {
    data() {
      return {
        // 用户名密码
        username: '',
        pwd: '',
        isUsernameFocus: true,
        isPwdFocus: false
      }
    },

    methods: {
      // 点击登录按钮
      clickLoginBtn() {
        if (this.username && this.pwd) {
          this.requestLoginInterface();
        } else {
          alert('用户名或密码不能为空');
        }
      },

      // 请求登录接口数据
      requestLoginInterface () {
        var self = this;
        self.$http.post(SWAGGER_CONFIG+'/Ddaas/userrole/loginCheck',
          {
            "userName":self.username,
            "passWord":self.pwd
          }
        ).then(function (response) {
          if(response.data.data == false){
            alert("用户名或密码不匹配！")
            return;
          }else{
            self.$store.commit(types.USERNAME,self.username);
            self.$store.commit(types.LOGIN, response.data.data);
            self.$router.push({path:"/homePage"});
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },

      usernameFocus () {
        this.isUsernameFocus = true;
        this.isPwdFocus = false;
      },

      pwdFocus() {
        this.isUsernameFocus = false;
        this.isPwdFocus = true;
      }
    },

    mounted () {
      // 挂在成功就聚焦输入框
      this.$refs.username.focus();
    }
  }

</script>

<style scoped>
  .login-wrapper {
     100%;
    height: 100%;
    min- 700px;
    min-height: 750px;
  }

  .login-wrapper .top {
     100%;
    height: 22%;
    display: flex;
    align-items: center;
  }

  .login-wrapper .top .content {
    display: block;
     100%;
    height: 61px;
    text-align: center;
  }

  .login-wrapper .top .content .system-logo {
    vertical-align: top;
  }

  .login-wrapper .top .content .system-name {
    font-size: 30px;
    line-height: 61px;
    color: #077fb7
  }

  .center {
     100%;
    height: 56%;
    background: linear-gradient(to bottom, #057fbf, #1697d4);
    /*text-align: center;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .center .login {
     52%;
    height: 68%;
    background-color: white;
    border-radius: 5px;
    border: 15px solid white;
    box-shadow: 0 0 0 7px rgba(139, 208, 255, 0.5);
  }

  .center .login .left {
     60%;
    height: 100%;
    box-sizing: border-box;
    float: left;
  }

  .center .login .right {
    float: right;
     40%;
    height: 100%;
    padding: 22px 8px 30px 22px;
  }

  .center .login .right .login-title {
    display: block;
     100%;
    height: 24px;
    font-size: 24px;
    text-align: center;
    line-height: 24px;
    vertical-align: middle;
  }

  .center .login .right .username-wrapper {
    position: relative;
  }

  .center .login .right .username-logo {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 10px;
     14px;
    height: 14px;
    background: url('../../static/img/login_user.png') no-repeat;
  }

  .center .login .right .username {
    display: block;
     100%;
    height: 40px;
    margin-top: 25px;
    outline: none;
    padding-left: 34px;
    border: 1px solid #e2e7eb;
    color: #404040;
  }

  .center .login .right .username-focus {
    display: block;
     100%;
    height: 40px;
    margin-top: 25px;
    outline: none;
    padding-left: 34px;
    border: 1px solid #0782bb;
    color: #404040;
  }

  .center .login .right .username::-webkit-input-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .username:-moz-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .username:-ms-input-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .pwd-wrapper {
    position: relative;
  }

  .center .login .right .pwd-logo {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 10px;
     14px;
    height: 15px;
    background: url('../../static/img/login_pwd.png') no-repeat;
  }

  .center .login .right .pwd {
    display: block;
     100%;
    height: 40px;
    margin-top: 25px;
    outline: none;
    padding-left: 34px;
    border: 1px solid #e2e7eb;
    color: #404040;
  }

  .center .login .right .pwd-focus {
    display: block;
     100%;
    height: 40px;
    margin-top: 25px;
    outline: none;
    padding-left: 34px;
    border: 1px solid #0782bb;
    color: #404040;
  }

  .center .login .right .pwd::-webkit-input-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .pwd:-moz-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .pwd:-ms-input-placeholder {
    color: #d2d2d2;
  }

  .center .login .right .login-btn {
    display: block;
     100%;
    height: 40px;
    margin-top: 30px;
    background: linear-gradient(to bottom, #1799d6, #047db5);
    border: none;
    color: white;
    font-size: 20px;
    outline: none;
  }

  .center .login .left img {
     100%;
    height: 100%;
  }

  .bottom {
     100%;
    height: 22%;
  }
</style>

展示用户名和注销功能都在headTop.vue中，headTop.vue为：

<template>
    <div id="all">
      <div class="top-left">
        <p>
          <img src="../../../static/img/BJRLLOGO.png">
          <span>北京热力面积投停管理系统</span>
        </p>
      </div>
      <div class="top-right">

          <div>
            <ul class="first-ul">
              <li class="first-li">
                <img src="../../../static/img/index.png" class="base-img">
                <span class="nav-span">首页</span>
              </li>
              <li class="dropdown">
                <img src="../../../static/img/user.png">
                <span class="dropdown-toggle nav-span" data-toggle="dropdown">
                  {{userName}}
                  <!--<b class="caret"></b>-->
                  <img src="../../../static/img/userxiala.png">
                </span>
                <ul class="dropdown-menu">
                  <li>
                    <img src="../../../static/img/qiehuan.png">
                    <span>切换账号</span>
                  </li>
                  <li>
                    <img src="../../../static/img/xiugai.png">
                    <span>修改密码</span>
                  </li>

                  <li>
                    <img src="../../../static/img/tuichu.png">
                    <span @click="logout">退出登录</span>
                  </li>

                </ul>
              </li>
            </ul>
          </div>


      </div>

    </div>
</template>
<style scoped>
  #all{
    100%;
    height:100%;
    background: #0A86C0;
  }
  .top-left{
    50%;
    height:100%;
    float:left;
    display: table;
  }
  .top-left p{
    display: table-cell;
    vertical-align: middle;
  }
  .top-left img{
    auto;
    height:auto;
    max- 100%;
    max-height: 100%;
    margin-left: 2%;
  }
  .top-left span{
    display: inline-block;
    color:#fff;
    font-size: 1.3vw;
    font-weight: bold;
    font-family: "Microsoft YaHei UI";
  }
  .top-right{
    50%;
    height:100%;
    float:left;
  }
  .top-right div{
    100%;
    height:100%;
    position: relative;
    display: table;
  }
  .first-ul{
    list-style: none;
    position: absolute;
    right:2%;
    top:36%;
    27%;
  }
  .first-ul>li{
    display: inline;
  }
  .dropdown-menu li{
    text-align: center;
  }
  .nav-span{
    color:#fff;
    font-size: 0.8vw;
    font-family: "Microsoft YaHei UI";
    cursor: pointer;
  }
  .dropdown-menu{
    min- 98px;
  }
  .dropdown-menu li{
    margin-top:6%;
  }
  .dropdown-menu span{
    font-size: 0.6vw;
    font-family: "Microsoft YaHei UI";
    cursor: pointer;
    color:#121212;
  }
  .first-li{
    margin-right: 20%;
  }
  .base-img{
    vertical-align: text-top;
  }
</style>
<script>
  import * as types from '../../store/types'
  import {mapState} from 'vuex'
    export default{
        data(){
            return{

            }
        },
        methods:{
          logout(){
            var self = this;
            self.$store.commit(types.LOGOUT)
            self.$router.push({
              path: '/'
            })

          }

        },
        computed: mapState({
            userName: state => state.userName
        })

    }
</script>

要说一句，就是vuex中的state里的值在页面刷新的时候会消失（即vuex中的状态管理是响应式的），因此我们使用localStorage来解决这个问题

这就是为什么这么麻烦在state和localStorage中传来传去，是因为state的值刷新后会没了，而localStorage的值不能响应式地变化（Vue 仅可以对其管理的数据做响应式处理，可以理解为 data 中的数据，localStorage 并不在 Vue 的管理下，自然不会有响应特性）；

完整的项目地址为：

https://github.com/yuwenjing0727/heating-power