<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div> <div> <input type="text" v-model="username"> <input type="text" v-model="passwrold"> </div> <div> <button @click="login">登陆</button> <button @click="loginOut">退出</button> <button @click="getUserInfo">获取用户信息</button> </div> <div> <button @click="logs = []">清空日志</button> </div> <ul> <li v-for="(item,index) of logs" :key="index">{{item}}</li> </ul> </div> <script> axios.defaults.baseURL = "http://localhost:3000" // 请求拦截 axios.interceptors.request.use((config) => { const token = localStorage.getItem("token"); if(token){ // 判断是否存在token，如果存在的话 // 每次发起HTTP请求时在headers中添加token // Bearer是JWT的认证头部信息 config.headers["Authorization"] = `Bearer ${token}` } return config; },error => alert(error)); // 响应拦截 axios.interceptors.response.use((res) => { app.logs.push(JSON.stringify(res.data)) return res; },error => alert(error)); const app = new Vue({ el:"#app", data:{ username:"", passwrold:"", logs:[] }, methods:{ login() { let {username,passwrold} = this; axios.post("/users/login/token",{ username,passwrold }).then((res) => { localStorage.setItem("token",res.data.token) }) }, loginOut(){ axios.post("/users/logout").then((res) => { localStorage.removeItem("token") }) }, getUserInfo(){ axios.get("/users/get/user/info").then((res) => { console.log(res) }); } } }) </script> </body> </html>
后端：
const Koa = require("koa"); const jwt = require("jsonwebtoken"); const jwtAuth = require("koa-jwt"); const Router = require('koa-router'); // koa 路由中间件 const bodyParser = require("koa-bodyparser"); const cors = require("koa2-cors"); const app = new Koa(); const router = new Router(); // 密钥 const secret = "this is a secret"; app.use(bodyParser()); app.use(cors()); router.post("/users/login/token",(ctx) => { const {body} = ctx.request; const {username} = body; ctx.body = { code:1, message:"登陆成功", body:{ username }, token:jwt.sign({ data:body, exp:Math.floor(Date.now() / 1000) + 60 * 60, },secret) } }); router.post("/users/logout",(ctx) => { const {body} = ctx.request; ctx.body = { code:1, message:"退出成功" } }) router.get("/users/get/user/info",jwtAuth({secret}),(ctx) => { // jwtAuth token参数 console.log(ctx.state.user.data) ctx.body = { code:1, message:"成功", data:ctx.state.user.data } }) app.use(router.routes()); app.listen(3000);
上面代码用到了很多的依赖模块，最关键的的是jsonwebtoken和koa-jwt，这两个模块一个是用来对token进行加密，一个是用来对数据进行解密的，同时在每次访问需要保护的路由的时候需要使用jwtAuth对其进行拦截处理，jwtAuth会根据其secret进行数据解密，把解密的数据存放到ctx.state中，供用户读取。
有关jwt相关请查看深入理解令牌认证机制详细的解释了其加密后数据token的构成。
加密后的数据主要分为三个部分机密头部、载荷、数据如果我们想查看其加密前内容是什么样子的，可以通过base64对其没一部分进行解密。
机密头部：声明加密规则，可反解
载荷：数据信息，也就是我们需要加密的信息，可反解
验证：这部分是对前两部分使用hash算法的摘要，是不可逆的
在使用jsonwebtoken时需要注意的是，由于加密信息是可以反解的所以，尽量不要在加密数据中存放敏感信息，比如用户的密码，用户私密信息等等（千万不要效仿Dome，这是不对的O(∩_∩)O）。同过上面所述，所传递给前端的token一旦发生变化，仅仅是一个字母大小写发生变化也是不行的，当服务端接收到token解密时，是无法正确解密的，这种token可以是发篡改的。如果想要篡改token必须要有其secret才可以对其进行篡改和伪造。
OAuthOAuth（开放授权）是一个开放标准，允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容，为了保护用户数据的安全和隐私，第三方网站访问用户数据前都需要显式的向用户征求授权。我们常见的提供OAuth认证服务的厂商有支付宝，QQ,微信。
OAuth协议又有1.0和2.0两个版本。相比较1.0版，2.0版整个授权验证流程更简单更安全，也是目前最主要的用户身份验证和授权方式。
OAuth认证主要经历了如下几步:
需要第三方应用存储资源所有者的凭据，以供将来使用，通常是明文密码。
需要服务器支持密码身份认证，尽管密码认证天生就有安全缺陷。
第三方应用获得的资源所有者的受保护资源的访问权限过于宽泛，从而导致资源所有者失去对资源使用时限或使用范围的控制。
资源所有者不能仅撤销某个第三方的访问权限而不影响其它，并且，资源所有者只有通过改变第三方的密码，才能单独撤销这第三方的访问权限。
与任何第三方应用的让步导致对终端用户的密码及该密码所保护的所有数据的让步。