vue中实现单点登录功能

Question

1. 业务需求如下： 访问域名/ 项目时会发送请求给后台，判断是否已经登录，如果登录就直接跳转，如果没有登录过就跳到登录页；
2. 遇到的问题： axios发送查询登录请求时会自动重定向302，导致拿不到JSON数据；使用axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';好像解决了问题，但是登录之后再跳转不会跳到首页去，好像是登录返回的TOKEN没有带上。
3. 请问，应该怎么封装axios？以后每次请求都要带上TOKEN。登录判断的请求应该在哪里发好一些，目前我在APP.vue中发的。
4. 谢谢大家。

Answer 1

你可以把token存在一个地方 然后对axios做封装
包括请求参数做统一处理
下面是一个简单的封装示例
由于请求方式不同，请求参数会出现在data和params 两个地方 请注意

import axios from 'axios';
import Cookie from '../util/cookie'
// 默认超时设置
axios.defaults.timeout = 5000;
// 相对路径设置
axios.defaults.baseURL ='';
//http request 拦截器
axios.interceptors.request.use(
  config => {
    // 获取token
    const token = Cookie.get('cc_token');
    // 设置参数格式
    config.headers = {
      'Content-Type':'application/json',
    };
    // 添加token到headers
    if(token){
      config.headers.token = token
    }
    //参数处理
    if(config.method === 'get' && config.url !== '/api/admin/login'){
      config.params = config.params || {}
    }else if(config.url !== '/api/admin/login'){
      config.data = config.data || {};
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.code === 501){
      // 登录验证
      router.push({
        name:'login'//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
);


/**
 * 封装get方法
 * @param url
 * @param params
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    }).then(response => {
        if(response.data.code === 200){
            //请求过滤
          resolve(response.data.data);
        }else{
          Message.error(response.data.msg)
        }
      })
      .catch(err => {
        reject(err);
        let message = '请求失败！请检查网络';
        if(err.response)message=err.response.data.message;
        MessageBox({
          title:'错误！',
          message:message,
          type:'error',
        })
      })
  })
}