本文只介紹簡單的應用，關於json web token的具體介紹以及原理請參考阮一峰老師的JSON Web Token 入門教程。

使用的Node框架是koa2，前端傳送ajax請求使用axios

首先建立工程目錄：

static中存放靜態資源，views存放前端模板，server.js為後端程式碼。

安裝必要的依賴項：

"dependencies": {
  "@koa/router": "^8.0.8","jsonwebtoken": "^8.5.1","koa": "^2.12.0","koa-bodyparser": "^4.3.0","koa-ejs": "^4.3.0","koa-jwt": "^4.0.0","koa-static": "^5.0.0","koa-views": "^6.2.2"
 }

在server.js中新增程式碼來建立一個簡單的後端程式，由於網上有太多相關示例程式碼，在此不再贅述。

const koa = require('koa');
const app = new koa();
const bodyParser = require('koa-bodyparser');
const router = require('@koa/router')();
const views = require('koa-views');
const static = require('koa-static');
const path = require('path');

app.use(bodyParser());
app.use(views(__dirname + '/views',{
 map: { html: 'ejs' }
}));

app.use(static(path.join(__dirname,'/static')));

router.get('/',ctx => ctx.render('index'));

app
 .use(router.routes())
 .use(router.allowedMethods());

app.listen(8080,() => {
 console.log('server is running at port 8080');
});

在const path = require('path');後新增程式碼：

const { sign } = require('jsonwebtoken');
const secret = 'demo';
const jwt = require('koa-jwt')({ secret });

sign方法用來生成toekn，secret為自定義的祕鑰，jwt提供路有許可權控制的功能，它會對需要限制的資源請求進行檢查。

建立路由login：

router.post('/login',ctx => {
 const { user } = ctx.request.body;
 if (user && user.username === 'vip') {
  let { username } = user;
  const token = sign({ username },secret,{ expiresIn: '1h' });
  ctx.body = {
   message: 'GET TOKEN SUCCESS',status: 200,token
  }
 } else {
  ctx.body = {
   message: 'GET TOKEN FAILED',status: 500
  }
 }
});

如程式碼所示，當前端傳送的請求體中包含一個user物件並且username為vip時將生成一個token返回給前端，這裡用到了前文提到的sign方法，第一個引數是使用者資訊，第二個引數是自定義的key，第三個引數是個option，此處只定義了過期時間。

再建立路由info：

router.get('/info',jwt,ctx => {
 ctx.body = { message: `Welcome ${ctx.state.user.username}!`};
});

與平時看到的路由程式碼稍有不同，這裡增加了一個jwt中介軟體，用來對許可權進行控制，如果無法通過驗證，則不會執行之後的程式碼。在前文生成token後，會把使用者名稱存入ctx.state.user中，在這裡可以直接獲取。

這時在控制檯中輸入node server啟動該專案

開啟index.html檔案，新增一個簡單的表單和一個按鈕，並引入axios：

<form>
 <input type="text" name="username">
 <button id="submit">提交</button>
</form>
<button id="get">獲取</button>
<script src="/vendors/axios.min.js"></script>

首先新增登入的邏輯：

 document.querySelector('#submit').addEventListener('click',e => {
  e.preventDefault();
  const username = document.querySelector('input[name="username"]').value;
  axios.post('/login',{ user: { username } })
   .then(response => {
    response = response.data;
    const { status,token,message } = response;
    if (status === 200) {
     localStorage.setItem('token',token);
    }
    alert(message);
   })
   .catch(error => alert(error.toString()));
 });

這裡將服務端生成的token存入localStorage以便下次使用。

當在輸入框中輸入vip並點選提交按鈕，後端返回如下格式的資訊：

message: "GET TOKEN SUCCESS"
status: 200
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InZpcCIsImlhdCI6MTU5MDMyOTkxOSwiZXhwIjoxNTkwMzMzNTE5fQ.PsyLYmr-pDxxdtrBEvMccVtBr9-xtOAHdZKen4FP34c"

然後再新增獲取邏輯：

document.querySelector('#get').addEventListener('click',e => {
  e.preventDefault();
  const instance = axios.create({ headers: { authorization: `Bearer ${localStorage.getItem('token')}` } });
  instance.get('/info')
   .then(response => {
    response = response.data;
    console.log(response)
    alert(response.message);
   })
   .catch(error => alert(error.toString()));
 });

此處用到了axios.create方法，該方法可以在請求頭中新增token資訊。用localStorage中獲取token並拼成形如authorization: Bearer token的形式，然後再用示例傳送get請求。

此時再點選獲取按鈕，會提示：

證明token是有效的。

此時去Application中把localStorage記錄清除掉，再點選獲取按鈕，提示：

證明攔截成功。

完整示例可以去我的GitHub檢視並下載。

到此這篇關於詳解Node.js使用token進行認證的簡單示例的文章就介紹到這了,更多相關Node.js使用token認證內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！