Bearer Token && JWT --- 深入理解令牌機制

Bear Token規范： 6750

• 概念：描述在HTTP訪問OAuth2保護資源時如何使用令牌的規范
• 特點：令牌就是身份證明
• 具體規定：在請求頭中定義Authorization

Authorization:  Bearer <token>

// 在請求頭中添加 Authorization
import axios from "axios"

export default function(vm){
    // 設置請求攔截器
    axios.interceptors.request.use(config => {
        //獲取token  在發送請求之前做些什么
        const token = localStorage.getItem('token');
        if(token){
            // Bearer Token 規范
            config.headers.Authorization =  'Bearer ' + token;
        }
        return config;
    })

    // 設置響應攔截器  - 統一處理401狀態碼，清理token，跳轉login
    // 需要用到 app 實例
    axios.interceptors.response.use(null, error =>{
        // 請求失敗攔截器
        // 美喲u登陸或令牌過期
        if(error.response.status == "401"){
            // 清空vuex和localStorage
            vm.$store.dispatch('logout');
            vm.$router.push('/login');
        }
        // 
        return Promise.reject(error);

    })

}

 

 

Json Web Token規范  jwt.io

• 概念：令牌的具體定義方式
• 規定：令牌由三部分構成 -頭。載荷。簽名
• 頭：包含加密算法 令牌類型等信息
• 載荷：包含用戶信息 簽發時間和過期時間等信息
• 簽名：根據頭 載荷及密鑰加密得到的哈希串  默認HS256 （Hmac Sha1 256）

　　（明文，頭和載荷base64可以解碼，不可以放敏感信息,token防篡改）

// koa | koa-router | jsonwebtoken | koa-jwt 
const Koa = require('koa');
const Router = require('koa-router');
const jwt = require('jsonwebtoken');
const jwtAuth = require('koa-jwt');

const secret = 'it is a secret';  // 密鑰算法

const app = new Koa();
const router = new Router();

const { log } = console;

router.get('/a',function(ctx){
    ctx.body = {a:1}
})

router.get('/api/login', async ctx => {
    const { username, password } = ctx.query;
    log(username, password);

    if (username == 'kaikeba' && password == '123') {
        // 生成令牌
        const token = jwt.sign(
            {
                data: { name: 'kaikeba' }, // 用戶信息
                exp: Math.floor(Date.now() / 1000) + 60 * 60  // 過期時間，單位秒
            },
            secret
        );
        ctx.body = { code:1,token};
    }else{
        ctx.status = 401;
        ctx.body = { code:0, message:'用戶名或密碼錯誤'}
    }
});

router.get(
    '/api/userinfo',
    jwtAuth({ secret }),
    async ctx => {
        ctx.body = { code:1, data:{name:'jerry',age:20}};
    }
);
app.use(router.routes());
app.use(router.allowedMethods()); // 設置請求頭
app.listen(3000);