一、jwt
1.1、介绍
在之前的我的项目中，大部分网页是通过session来判断用户是否有权限来拜访个别网页的，然而如果是SPA我的项目的话，前后端拆散，客户申请的是前端，所以并不会保留数据到session，那该怎么办呢？针对这一问题，能够应用jwt来解决！
JWT也就是JSON Web Token（JWT），是目前最风行的跨域身份验证解决方案。
JWT的组成：一个JWT实际上就是一个字符串，它由三局部组成：头部(Header)、载荷(Payload)与签名(signature)。
生成一个加密后的字符串，发送给客户端，客户端保留在浏览器中(cookie/localstorage/sessionstorage),在客户端申请敏感数据时，须要必须让客户端在头像携带加密的字符串(token)给服务器，服务器获取到token值后，进行解密，进行信息的比对，如果比对胜利则返回数据，不对则不返回数据。
1.2、jsonwebtoken
nodejs中jsonwebtoken提供了一套（jwt）加密和解码的算法
- 装置
npm i -S jsonwebtokennpm i -S express cors mongoose- 加密解密
var token=require("jsonwebtoken");//加密 生成密钥keyvar key=token.sign(数据,加密串);//解密 通过加密串将密钥解密还原var source=token.verify(key,加密串);- 加密
const router = require('express').Router()const jwt = require('jsonwebtoken')// 设置一个jwt加密和解密时须要的key值const secretKey = 'afwefjwlefjlwjflewjjfew;jfwe;jfwe;jf;ejf;w'// 登录胜利后，让放弃登录者的状态，以前计划应用session,然而当初咱们前后端拆散，应用jwt// 接口登录操作router.post('/login', (req, res) => { let {username, password} = req.body res.send({ code: 0, msg: 'ok', data: { // 加密 token: jwt.sign({ id: 1, username, // token过期工夫 个别设置时长为2小时，有一些公司1天 1周 1个月 // exp: Date.now() + 7200 * 1000 }, secretKey) } })})- 解密
router.get('/users', (req, res) => { const token = req.headers['token'] res.send({ code: 0, msg: 'ok', data: { id: 1, name: '张三', token: jwt.verify(token, secretKey) } })})module.exports = router;二、接口编写
2.1、restfulapi
一种软件架构格调、设计格调，而不是规范，只是提供了一组设计准则和约束条件。
RestfulApi：面向资源
解决的问题
- 升高开发的复杂性
- 进步零碎可伸缩性
2.2、标准
①、协定：API与用户的通信协议，总是应用http或https协定。
②、域名：应该尽量将API部署在专用域名之下，例：http://api.demo.com
③、版本：应该将API的版本号放入URL，不便和直观，例http://api.demo.com/v1
④、门路
在RESTful架构中，每个网址代表一种资源（resource），所以网址中不能有动词，只能有名词。例：https://api.example.com/v1/users
⑤、HTTP动词
对于资源的具体操作类型，由HTTP动词示意
GET（SELECT）：从服务器取出资源（一项或多项）。POST（CREATE）：在服务器新建一个资源。PUT/patch（UPDATE）：在服务器更新资源（客户端提供扭转后的残缺资源）。DELETE（DELETE）：从服务器删除资源。例上面的形式来操作和获取数据GET /zoos：列出所有动物园GET /zoos/ID：获取某个指定动物园的信息POST /zoos：新建一个动物园PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全副信息）DELETE /zoos/ID：删除某个动物园⑥、过滤信息
如果记录数量很多，服务器不可能都将它们返回给用户。API应该提供参数，过滤返回后果。例：?limit=10：指定返回记录的数量
⑦、状态码
服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）
200 OK - [GET]：服务器胜利返回用户申请的数据，该操作是幂等的（Idempotent）。201 CREATED - [POST/PUT/PATCH]：用户新建或批改数据胜利。202 Accepted - [*]：示意一个申请曾经进入后盾排队（异步工作）204 NO CONTENT - [DELETE]：用户删除数据胜利。400 INVALID REQUEST - [POST/PUT/PATCH]：用户收回的申请有谬误，服务器没有进行新建或批改数据的操作，该操作是幂等的。401 Unauthorized - [*]：示意用户没有权限（令牌、用户名、明码谬误）。403 Forbidden - [*] 示意用户失去受权（与401谬误绝对），然而拜访是被禁止的。404 NOT FOUND - [*]：用户收回的申请针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。406 Not Acceptable - [GET]：用户申请的格局不可得（比方用户申请JSON格局，然而只有XML格局）。410 Gone -[GET]：用户申请的资源被永恒删除，且不会再失去的。422 Unprocesable entity - [POST/PUT/PATCH] 当创立一个对象时，产生一个验证谬误。500 INTERNAL SERVER ERROR - [*]：服务器产生谬误，用户将无奈判断收回的申请是否胜利。⑧、返回后果
针对不同操作，服务器向用户返回的后果应该合乎以下标准
GET /collection：返回资源对象的列表数组GET /collection/resource：返回单个资源对象POST /collection：返回新生成的资源对象PUT /collection/resource：返回残缺的资源对象DELETE /collection/resource：返回一个空文档三、构建我的项目
3.2、前端我的项目构建
应用webpack来进行前端我的项目工程化构建
- package.json
{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "serve": "webpack-dev-server", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.14.3", "@babel/preset-env": "^7.14.2", "art-template": "^4.13.2", "art-template-loader": "^1.4.3", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "copy-webpack-plugin": "^6.4.1", "core-js": "^3.13.0", "css-loader": "^5.2.6", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^4.5.2", "style-loader": "^2.0.0", "ts-loader": "^6.2.2", "typescript": "^4.3.2", "url-loader": "^4.1.1", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2" }, "dependencies": { "jquery": "^3.6.0" }}- webpack.config.js
const path = require('path')// webpack插件，帮忙webpack打包生成时，创立一个index.html文件const HtmlWebpackPlugin = require('html-webpack-plugin')// 删除打包成的dist目录const { CleanWebpackPlugin } = require('clean-webpack-plugin')// 动态资源复制const CopyPlugin = require('copy-webpack-plugin')module.exports = { // 开启的模式，生产还是开发 mode: 'development', // 开发工具配置 开发时配置 source-map 作用：代码出错了，能够帮咱们定位到src目录中程序 devtool: 'source-map', // 指定入口文件 // 字符串 entry: './src/main.js', // 进口 output: { // 打包生成的文件门路 相对地址 path: path.resolve('dist'), // 打包生成后的主入口js文件 filename: '[name].[hash:8].js' }, resolve: { alias: { '@': path.resolve('src') }, extensions: ['.js', '.json', '.art'] }, // 加载器 module: { // 规定 rules: [ // 解决css { // 正则匹配loader解析文件扩展名 test: /\.css$/i, // loader执行程序 // 执行程序 写在一行：从右向左，写在多行：从下向上执行 use: [ "style-loader", "css-loader" ] }, // 图片解决 { test: /\.(png|jpeg|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { // 图片小于8kb，就会被base64解决 limit: 1 * 1024, name: 'images/[name].[ext]', publicPath: '/' } } ] }, // html中图片解决 { test: /\.html$/, loader: ['html-loader'] }, // js兼容解决 { test: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { // 按需加载 useBuiltIns: 'usage', // 指定core-js版本 corejs: 3, // 兼容性做到哪个版本的浏览器 targets: { chrome: '75' } } ] ] } } ] }, // 模板引擎解释 { test: /\.art$/, use: ["art-template-loader"] } ] }, // 插件 plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ // 模板 template: path.resolve('public/index.html') }), // 复制动态资源 -- 间接复制不做任何解决 new CopyPlugin({ patterns: [ { // 起源 from: path.resolve('public/favicon.ico'), // 指标 to: path.resolve('dist/favicon.ico') } ] }) ], devServer: { port: 3000, // 显示编辑打包进度 progress: true, // 宁静模式,不显打包信息 quiet: true, // 代理 proxy: { '/api': { target: 'https://api.iynn.cn/film', changeOrigin: true, pathRewrite: { // '^/api': '' } } } }}- tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true }}- 前端路由
应用一个第3方路由模块
SME Router 是仿照 express 的格调编写的，前端路由库。所以 api 跟 express 有点相似。
npm i -S sme-routerhttps://sme-fe.github.io/website-router/zh/basic.html# 修复后的路由npm i -S wucode-router