詳解Node.js使用token進(jìn)行認(rèn)證的簡單示例

更新時(shí)間：2020年05月25日 10:18:21 作者：秦老爺子

這篇文章主要介紹了詳解Node.js使用token進(jìn)行認(rèn)證的簡單示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文只介紹簡單的應(yīng)用，關(guān)于json web token的具體介紹以及原理請參考阮一峰老師的JSON Web Token 入門教程。

使用的Node框架是koa2，前端發(fā)送ajax請求使用axios

首先創(chuàng)建工程目錄：

static中存放靜態(tài)資源，views存放前端模板，server.js為后端代碼。

安裝必要的依賴項(xiàng)：

"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中添加代碼來創(chuàng)建一個(gè)簡單的后端程序，由于網(wǎng)上有太多相關(guān)示例代碼，在此不再贅述。

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提供路有權(quán)限控制的功能，它會對需要限制的資源請求進(jìn)行檢查。

創(chuàng)建路由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
  }
 }
});

如代碼所示，當(dāng)前端發(fā)送的請求體中包含一個(gè)user對象并且username為vip時(shí)將生成一個(gè)token返回給前端，這里用到了前文提到的sign方法，第一個(gè)參數(shù)是用戶信息，第二個(gè)參數(shù)是自定義的key，第三個(gè)參數(shù)是個(gè)option，此處只定義了過期時(shí)間。

再創(chuàng)建路由info：

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

與平時(shí)看到的路由代碼稍有不同，這里增加了一個(gè)jwt中間件，用來對權(quán)限進(jìn)行控制，如果無法通過驗(yàn)證，則不會執(zhí)行之后的代碼。在前文生成token后，會把用戶名存入ctx.state.user中，在這里可以直接獲取。

這時(shí)在控制臺中輸入node server啟動該項(xiàng)目

打開index.html文件，添加一個(gè)簡單的表單和一個(gè)按鈕，并引入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()));
 });

這里將服務(wù)端生成的token存入localStorage以便下次使用。

當(dāng)在輸入框中輸入vip并點(diǎn)擊提交按鈕，后端返回如下格式的信息：

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的形式，然后再用示例發(fā)送get請求。

此時(shí)再點(diǎn)擊獲取按鈕，會提示：