day0528

于 2021-05-29 10:58:43 发布
阅读量93 收藏
点赞数
分类专栏： qianfeng
原文链接：https://blog.csdn.net/weixin_42454057/article/details/117372341
版权

day0528

jwt

JSON Web Token

介绍

在这里插入图片描述

jsonwebtoken

nodejs中jsonwebtoken提供了一套（jwt）加密和解码的算法

安装：

npm i -S jsonwebtoken
npm i -S express cors mongoose

加密解密：

var token=require("jsonwebtoken");
//加密 生成密钥key
var key=token.sign(数据,加密串);
//解密 通过加密串将密钥解密还原
var source=token.verify(key,加密串);

加密：

在这里插入图片描述

解密：

在这里插入图片描述

接口编写

restfulapi

一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。

RestfulApi：面向资源

在这里插入图片描述

解决的问题
降低开发的复杂性
提高系统可伸缩性

规范

在这里插入图片描述

GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT/patch（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
DELETE（DELETE）：从服务器删除资源。
例下面的方式来操作和获取数据
GET /zoos：列出所有动物园
GET /zoos/ID：获取某个指定动物园的信息
POST /zoos：新建一个动物园
PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
DELETE /zoos/ID：删除某个动物园

在这里插入图片描述

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：返回一个空文档

构建项目

前端项目构建

使用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-router
https://sme-fe.github.io/website-router/zh/basic.html
修复后的路由
npm i -S wucode-router

在这里插入图片描述

pika521197
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Time of Day 3.2.0
07-06
Time of day 3.2.0.unitypackage Time of day 3.2.0.unitypackage
jwt、restfulapi
weixin_42454057的博客
05-28 163
1、jwt 1.1jwt的介绍 JWT也就是JSON Web Token（JWT），是目前最流行的跨域身份验证解决方案。 JWT的组成：一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)。 1.2、jsonwebtoken //安装 npm i -S jsonwebtoken npm i -S express cors mongoose 加密 const router = require('express').Router() c
RESTful APi 登陆权限、node.js、用户状态控制之JWT（Json web Token）
Harry_一棵树的博客
03-05 3111
http协议是无状态的，所有用户进行多次请求，服务器都不会知道这些请求是谁请求的，以前我可以使用session记录客户端登陆的用户信息，然后让客户端保存用户的cookie，然后客户端每次请求带上cookie，这样服务端就可以识别。JWT其实就是基于token的鉴权机制： 1.首先客户端使用用户名密码来通过api请求服务器 2.服务器进行验证用户的信息，发送给客户端一个token ...
jwt配置 restful_SpringBoot实现JWT保护前后端分离RESTful API
weixin_29615645的博客
01-14 179
本文将用不到100行Java代码, 教你如何在Spring Boot里面用JWT保护RESTful api.登录前登录之后即可得到正确结果登陆后1. 什么是JWT了解JWT的同学可以跳过这一部分废话少说, 我们先看看什么是JWT. JSON Web Token其实就是一个包含认证数据的JSON, 大概长这样子分三个部分,第一部分{"alg":"HS512"}是签名算法第二部分{"exp":149...
使用 JWT 让你的 RESTful API 更安全
倔强的蜗牛
08-29 5万+
传统的 cookie-session 机制可以保证的接口安全，在没有通过认证的情况下会跳转至登入界面或者调用失败。 在如今 RESTful 化的 API 接口下，cookie-session 已经不能很好发挥其余热保护好你的 API 。 更多的形式下采用的基于 Token 的验证机制，JWT 本质的也是一种 Token，但是其中又有些许不同。 什么是 JWT ？ JWT 及时 JSON W
jwt配置 restful_在restful api模式上使用JWT
weixin_42546508的博客
01-14 253
什么是JWTJWT(JSON Web Token), 顾名思义就是可以在Web上传输的token，这种token是用JSON格式进行format的。它是一个开源标准(RFC 7519)，定义了一个紧凑的自包含的方式在不同实体之间安全的用JSON格式传输信息。现在，许多项目模式基本都是前端分离和restful api模式。 因此，传统的session模式无法满足认证要求，这时就出现了jwt。 可以说...
dayofyear.rar_dayofyear
09-24
输入一个日期，弹出这是一年中的第几天，不管是平年还是闰年都可以
0day漏洞检测
04-13
利用FUZZING技术检测漏洞，检测Activex插件的漏洞学习。
Javaday02训练
02-08
Javaday02训练
代码随想录刷题打卡day02
最新发布
04-18
代码随想录刷题打卡day02
Restful API 使用 JWT 安全验证
dream_heheda的博客
06-19 534
import org.springframework.util.DigestUtils; import org.springframework.web.servlet.handler.HandlerInterceptorAdapter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSer...
RESTful API使用JWT做无状态的身份认证
云中采薇
12-30 7702
JWT设计RESTful架构的前后端，天然要求API是无状态的，JWT(JSON Web Token)简单易用，适合在分布式系统中做API无状态的身份认证。jwt由Header、Payload、Signature三部分组成，使用 . 分割开，一个JWT形式：Header.Payload.Signature这三部分分别对应的是加密算法、携带的用户信息、加密后的字符串（签名）。jwt自带签名，能够防止伪
RESTful登录(基于token鉴权)的设计实例
lucasma的博客
04-06 6万+
使用场景 现在很多基于restful的api接口都有个登录的设计，也就是在发起正式的请求之前先通过一个登录的请求接口，申请一个叫做token的东西。申请成功后，后面其他的支付请求都要带上这个token，服务端通过这个token验证请求的合法性。这个token通常都有一个有效期，一般就是几个小时。 比如我之前接入过一个支付宝和微信支付的通道，他们提供的api就要求先登录获取token然后才能使用...
使用jwt实现restful接口用户验证
Technology exist forever
12-27 4797
基于restful进行前后端分离的项目由于是基于json进行数据传输，前端既可以是web、android也可以是IOS，但是这样就产生了一个问题，http协议是无状态的，restful也是无状态的，用户状态信息该如何保存？restful接口的用户认证有几种方案：1.使用session+cookie进行用户认证。 2.使用token进行认证，如果用户登陆成功，则通过某种规则（比如userName+t
Spring Boot+Spring Security+JWT 实现 RESTful Api 权限控制
zalan01408980的博客
06-06 1725
摘要：用spring-boot开发RESTful API非常的方便，在生产环境中，对发布的API增加授权保护是非常必要的。现在我们来看如何利用JWT技术为API增加授权保护，保证只有获得授权的用户才能够访问API。 一：开发一个简单的API 在IDEA开发工具中新建一个maven工程，添加对应的依赖如下： <dependency> <groupId&...
使用JWT Token进行RestFul API权限验证
a1203177935的博客
07-01 6212
问题 后端提供的RestFul API一般都需要进行权限验证，而Web框架一般采用Cookies+Session来进行认证。但RestFul API属于无状态协议，而在后台使用Session的话，由于Session本身需要服务端进行维持，这样就破坏了Rest的无状态性。 解决方案 抛弃Cookie+Session的认证架构，选用Token作为认证手段。在登录验证时，后台收集账号信息、IP、访...
Restful API 状态管理：JWT
呼吸吐纳的博客
03-19 1220
Restful API Restful讲究一个无状态的特性（stateless），这就不能把一些例如登陆后的认证信息写进cookie的传统方式，目前探索的是采用token的方式来进行权限的识别。 JWT JWT 是JSON风格轻量级的授权和身份认证规范，可实现无状态、分布式的Web应用授权； jwt Token 是一串base64之后的代码 具体分为三部分： ...
Spring Boot+Spring Security+JWT 实现 RESTful Api 认证 （一）
热门推荐
https://gitee.com/micai-code
09-13 9万+
摘要：用spring-boot开发RESTful API非常的方便，在生产环境中，对发布的API增加授权保护是非常必要的。现在我们来看如何利用JWT技术为API增加授权保护，保证只有获得授权的用户才能够访问API。 一：开发一个简单的API 在IDEA开发工具中新建一个maven工程，添加对应的依赖如下： <dependency> <gro...
day.replace
02-28
day.replace() 是 Python 中的一个字符串方法，用于替换字符串中的子串。它接受两个参数，第一个参数是要被替换的子串，第二个参数是替换后的新子串。 例如，我们有一个字符串 "Today is a sunny day."，我们想把...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值