前後端分離之JWT（JSON Web Token）的使用

52admln發表於2019-02-16
後端JWTJSONWeb

前言

由於自己開發的專案中用到了 JWT 技術，前端採用了 Vue.js 框架，後端採用了 CodeIgniter 框架，故作此文幫助使用相同技術棧的朋友們。

具體思路如下：
把後端生成的 JWT token 存入 localStorage，然後前端切換路由（重新整理頁面）的時候，通過 Ajax 請求的時候帶上這個 token，提交給後端判斷當前的 token 是否有效，後端返回結果。

JWT 用處很多，可以用於後臺許可權的限制、介面安全性校驗。

使用教程

前端 Vue.js

vue-router

登入時，將後端返回的 token 存入 localStorage

使用 Vue-Router 判斷是否存在 token，不存在跳轉至登入

// JWT 使用者許可權校驗，判斷 TOKEN 是否在 localStorage 當中
router.beforeEach(({name}, from, next) => {
  // 獲取 JWT Token
  if (localStorage.getItem(`JWT_TOKEN`)) {
    // 如果使用者在login頁面
    if (name === `login`) {
      next(`/`);
    } else {
      next();
    }
  } else {
    if (name === `login`) {
      next();
    } else {
      next({name: `login`});
    }
  }
});

axios

axios 全域性配置攔截器
每次向後端請求攜帶 頭資訊

在 src/main.js 當中加上以下程式碼：

// http request 攔截器
axios.interceptors.request.use(
  config => {
    if (localStorage.JWT_TOKEN) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
      config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 攔截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      console.log(`axios:` + error.response.status);
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token資訊並跳轉到登入頁面
          store.commit(`LOG_OUT`);
          router.replace({
            path: `login`,
            query: {redirect: router.currentRoute.fullPath}
          });
      }
    }
    return Promise.reject(error.response.data);   // 返回介面返回的錯誤資訊
  });

Vue.prototype.$http = axios;

後端 CodeIgniter

後端 Controller 接收請求頭資訊，驗證 token 有效性，無效返回 401 狀態碼

    $header = $this->input->get_request_header(`Authorization`, TRUE); // 獲取請求頭 Authorization
    list($token) = sscanf($header, `token %s`); // 提取 token
    if ($header != `` && jwt_helper::validate($token)) {
        $userid = jwt_helper::decode($header)->userId; // 解碼token 提取 userId 欄位
        // do something
    } else {
        show_error("Permission denied", 401, "Please check your token."); // 401錯誤
    }

這裡提供了自己使用的封裝好的 JWT Helper 類 和 JWT 的庫 使用方法和檔案可以訪問 Github
倉庫：https://github.com/52admln/JW…

安全性

可參考文章：http://www.cnblogs.com/xiekel… 當中的基於JWT的Token認證的安全問題。

相關文章