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
};

本篇文章僅供參考學習，做筆記更新，資料是經過觀看多位前輩資料學會而來，但不記得是哪幾位前輩了，晚輩在此感謝各位提供的學習資料，我自學習並在專案中使用後，經過自我消化，現當做筆記記錄並分享給更多想需要的同行。