后端

• 端口在3000
• 使用jsonwebtoken和koa-jwt生成令牌并返回
• 對’/api/userinfo’端口,先驗證令牌是否通過,若通過返回數據

const Koa = require('koa');
const Router = require('koa-router');
// 生成令牌、驗證令牌
const jwt = require('jsonwebtoken');
const jwtAuth = require('koa-jwt');// 生成數字簽名的密鑰
const secret = 'odd marron';const app = new Koa();
const router = new Router();router.get('/api/login', async ctx => {const { username, passwd } = ctx.query;console.log(username, passwd);if (username === 'admin' && passwd === '123456') {// 生成令牌const token = jwt.sign({data: { name: '好吃的栗子' }, // 用戶數據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: '栗子',age: 18}}}
)app.use(router.routes());
app.listen(3000,()=>{console.log('[server] server is runnint at http://127.0.0.1:3000');
});

前端

• 運行在8080端口,故產生了跨域
• 在vue.config.js中添加代理
• 對所有’/api’開頭的請求進行代理

configureWebpack:{devServer:{proxy:{'/api':{target: 'http://127.0.0.1:3000',changeOrigin: true}}}
}