JWT (5) Client Side 實作範例

Posted at 2016-03-07 JWT jwt

Client Side 基本只需要做三件事

把 Server Side 傳過來的 Token 存下來

1
2
3

// 來在 request response
var token = 'xxxxxxx';
localStorage.setItem('accessToken', token);

在需要權限驗證才能使用的 API，改用有帶 Token 的 HTTP Header。

1
2
3

var req = new XMLHttpRequest();
req.open('GET', `${API_HOST}/orders`, true);
req.setRequestHeader('Authorization', 'Bearer ' + accessToken);

在 Server 告知 Token 過期的時候，把 Token 丟掉，並將使用者狀態變成登出。

var req = new XMLHttpRequest();
req.open('GET', `${API_HOST}/me`, true);
  req.setRequestHeader('Authorization', 'Bearer ' + token);
  req.responseType = 'json';
  req.onreadystatechange = function() {
    if (req.readyState != 4) return;

    switch (req.status) {
      case 200:
        // 正常流程
        break;
      case 401:
        // 清除 Token，並做使用者登出時，UI控制需相對應的反應。
        localStorage.removeItem('accessToken');
        break;
    }
  };
  req.send();

補充

client 驗證 token 是否過期

var jwt_decode = require('jwt-decode');

var decoded = jwt_decode(_token)

if ((decoded.exp * 1000) < new Date().getTime()) {
  // token 過期
} else {
  // token 有效
}

Previous post: Facebook Share vs Feed Next post: 使用 git stash

Typography

活版印字

Client Side 基本只需要做三件事

補充