vue 前端关于token的使用（基础）

token

token在前后端项目里越来越被广泛运用，由于校验用户是否正常登陆在线。但一般设置有实效，一个小时，或者两个小时，当用户超时不使用时token就会失效，需要重新登陆或者重新刷新token。

1.vue如何使用token

• 在登陆请求成功后设置token（一般由后端生成token）

 this.$https.post('api/user/login', postData).then((res) => {
 	if(res.code == 0){ //登陆成功
 	  let accessToken = res.result.token;//从后台返回的token
 	  localStorage.setItem('accessToken', accessToken); // 用localStorage缓存token值
 	}
 })

2.封装http的地方设置全局token（一次性设置，每次http请求就会自动携带token）

import axios from "axios";
import qs from "qs";

const httpService = axios.create({
  baseURL: window.api.url,
  timeout: 600000,
  responseType: `json`,
  transformRequest: [data => qs.stringify(data)],
  headers: {
    "Conten-Type": `appplication/x-www-form-urlencoded;charset=utf-8`
  }
});

// 在配置里参数里设置Authorization 将 token 赋值给它
httpService.interceptors.request.use(
  config => {
    // 设置token start
    let accessToken = localStorage.getItem('accessToken');
    if (accessToken && accessToken !== '') {
      config.headers.common['Authorization'] = accessToken;
    } 
    // 设置token end
   return config;
  },
  error => Promise.reject(error)
);

// 在请求响应的地方回设 token 
httpService.interceptors.response.use(
  response => {
    // 回设置token start
    let accessToken = response.headers['authorization'];
    if (accessToken && accessToken !== '') {
      localStorage.setItem('accessToken', accessToken);
    }
    // 回设置token end
    return response.data;
  },
  
  // 请求异常信息提示处理
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = `错误请求`;
          break;
        case 401:
          error.message = `未授权，请重新登录`;
          break;
        case 403:
          error.message = `拒绝访问`;
          break;
        case 404:
          error.message = `请求错误,未找到该资源`;
          break;
        case 405:
          error.message = `请求方法未允许`;
          break;
        case 408:
          error.message = `请求超时`;
          break;
        case 500:
          error.message = `服务器端出错`;
          break;
        case 501:
          error.message = `网络未实现`;
          break;
        case 502:
          error.message = `网络错误`;
          break;
        case 503:
          error.message = `服务不可用`;
          break;
        case 504:
          error.message = `网络超时`;
          break;
        case 505:
          error.message = `http版本不支持该请求`;
          break;
        default:
          error.message = `未知错误${error.response.status}`;
      }
    } else {
      error.message = "连接到服务器失败";
    }
    return Promise.reject(error);
  }
);

// 请求方法封装
/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: `get`,
      params: params
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: `post`,
      data: params
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function fileUpload(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: `post`,
      data: params,
      headers: { "Content-Type": `multipart/form-data` }
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

export default {
  get,
  post,
  fileUpload
};

本篇文章仅供参考学习，做笔记更新，资料是经过观看多位前辈资料学会而来，但不记得是哪几位前辈了，晚辈在此感谢各位提供的学习资料，我自学习并在项目中使用后，经过自我消化，现当做笔记记录并分享给更多想需要的同行。