利用axios拦截器来添加token，利用vue router 来实现登录页面的跳转

1，引入axios

import axios from 'axios';
Vue.prototype.$http = axios;

2，axios拦截

// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = 'https://api.github.com';

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.token) { //判断token是否存在
      config.headers.token = localStorage.token;  //将token设置成请求头
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.errno === 999) {
      router.replace('/login');
      console.log("token过期");
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

3,vue router

在vue-router 的router.js里面配置修改如下

给每个要登录的都添加上meta.needlogin

{
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        needLogin: true
      }
    },

4,vue-router每次跳转页面时判断

// router配置
router.beforeEach((to, from, next) => {
  // 获取用户登录成功后储存的登录标志
  let jobNo = localStorage.getItem('jobNo')
  // 如果是已经登陆状态
  if (jobNo !== null) {
    next()
  } else {
    // 判断是否需要登陆
    if (to.meta.needLogin === true) {
      router.push('/login')
    } else {
      next()
    }
  }
})

5,然后就可以愉快的使用啦