jwt介紹及使用jwt實作單點登入

• jwt : 全稱

  JSON Web Token

  , 官方文檔 ：JSON Web Token（JWT）是一個開放标準（RFC 7519），它定義了一種緊湊且獨立的方式，可以在各方之間作為JSON對象安全地傳輸資訊。此資訊可以通過數字簽名進行驗證和信任。JWT可以使用秘密（使用HMAC算法）或使用RSA或ECDSA的公鑰/私鑰對進行簽名。
• 通俗來講，JWT是一個含簽名并攜帶使用者相關資訊的加密串，頁面請求校驗登入接口時，請求頭中攜帶JWT串到後端服務，後端通過簽名加密串比對校驗，保證資訊未被篡改。校驗通過則認為是可靠的請求，将正常傳回資料。
• JWT由 header（頭資訊）,playload（載荷 ）,signature(簽證資訊)組成 ， 形如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ。中間以" . "分割。

傳統的session-cookie機制

1. 每個使用者經過我們的應用認證之後，我們的應用都要在服務端做一次記錄，以友善使用者下次請求的鑒别，通常而言session都是儲存在記憶體中，而随着認證使用者的增多，服務端的開銷會明顯增大。
2. 因為是基于cookie來進行使用者識别的, cookie如果被截獲，使用者就會很容易受到跨站請求僞造的攻擊。

下面是使用JWT實作簡易登入态的代碼

// 在登陸成功時生成加密的token令牌并發送給後端
//第一個參數 : 要加密的内容；
//第二個參數 : 加密方式，這裡随便寫的
//第三個參數 : 過期時間 ，機關 : 秒
//第四個參數 ： 回調函數
      jwt.sign({ username : body.username }, 'abcdef',{ expiresIn : 60 } function(err, token) {
        res.json({
          code : 0,
          errmsg : 'ok',
          token
        });
      });
           

main.js

axios.interceptors.request.use(function (config) {
  // 每次發起axios的時候，就會把token帶給後端
  config.headers.common.token = localStorage.getItem('token');
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});
           

前端頁面配置

//全局前置守衛，所有的路由都會走到這裡
router.beforeEach((to, from, next) => {
  //to : 從哪裡來的url
  //登入界面和注冊界面不需要進行token驗證
  if( to.path == '/login' || to.path == '/register' ){
    next();
  }
  else{
  //擷取token
    var token = localStorage.getItem('token');
    if(!token){
    //如果不存在，則重定向
      next('/login');
    }
    else{
      next();
    }
//向後端發送請求，驗證token是否合法
    axios.get('/api/users/info').then((res)=>{
    //res.data.code == 0表示token合法
      if(res.data.code == 0){
        store.commit('SET_USERNAME',res.data.username);
        next();
      }
      else{
        next('/login');
      }
    }).catch(()=>{
      next('/login');
    });
    
  }
})
           

驗證token

router.get('/info',(req,res,next)=>{

  var token = req.headers.token;
  //進行token解碼，驗證是否是合法的token
  jwt.verify(token, 'abcdef', function(err, decoded) {
    if(err){
    //将結果傳回給前端
      res.json({
        code : -1,
        errmsg : 'token錯誤'
      });
    }
    else{
      res.json({
        code : 0,
        errmsg : 'token正确',
        username : decoded.username
      });
    }
  });

});