加密技术,token认证技术,axios 简单封装与拦截器使用request.js,RESTful等基础知识

加密技术:密码常用术语

 现代密码学设计原则:

柯克霍夫原则: 数据的安全基于密钥而不是算法的保密。即系统的安全取决于密钥,对密钥保密,对算法公开

常用加密码算法:

  • 对称加密:(加密密钥和解密秘钥一样)

:指加密和解密使用相同密钥的加密算法。对称加密算法的原理很容易理解,通信一方用KEK加密明文,另一方收到之后用同样的KEY来解密就可以得到明文。

示例-crypto.js库:crypto-js是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作。
目前crypto-js已支持的算法有:MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。
使用时可以引用总文件,也可以单独引用某一文件。

  1. 安装方式一:  npm install crypto-js
  2. 安装方式二: 引用文件 <script src="./crypto-js.js" ></script> 

  • 非对称(加密密钥和解密秘钥不一样,公钥加密,私钥解密)

非对称加密算法,使用两把完全不同但又是完全匹配的一对Key:公钥和私钥。
在使用非对称加密算法加密文件时,只有使用匹配的一对公钥和私钥,才能完成对明文的加密和解密过程。

 

  • 不可逆加密算法

  1. Hash算法特别的地方在于它是一种单向算法,
  2. 一旦加密就不能反向解密得到密码原文.
  3. 常用在不可还原的密码存储、信息完整性校验等。
  4. 常见的不可逆加密算法有: MD5、SHA、HMAC
  5. 在用户模块,对于用户密码的保护,通常都会进行加密。我们通常对密码进行加密,然后存放在数据库中,
  6. 在用户进行登录的时候,将其输入的密码进行加密然后与数据库中存放的密文进行比较,以验证用户密码是否正确。 

base64:

编码技术,以文本方式在网络中传输。

Base64并不是一种加密方式,明文使用Base64编码后的字符串通过索引表可以直接还原为明文。因此,Base64只能作为一种数据的存储格式

  • npm 安装 npm install js-base64
  • let Base64 = require("js-base64").Base64//还是require
  • this.pw = Base64.encode(this.passWord)//还是那些操作

token认证技术

token令牌 用于服务端验证请求用户是否登录过的一种安全技术

  • 是由服务端生成验证身份
  • 响应给客户端,客户端本地保存,以后客户端的请求都要携带此token
  • 服务端判断token是否是服务端签发,如果是正常响应数据

工作流程:

  • 前端发送登录请求-->用户密码到后端,后端生成token
  • 前端存储token,放在cookie里或者localstorage里
  • 前端向后端请求资源的时候需要带着token
  • 后端收到请求,验证客户端里面带着token,验证成功,则返回前端请求的数据

JWT技术:

前端:axios网络库,拦截器统一设置到token到请求头authroiation

<script src='./lib/axios.min.js'>
           <script>
                默认axios实例
                axios({method:'get',url:''}).then(res=>{}).catch(err=>{})

                // 自己创建axios实例 requst.js
                let myAxios = axios.create({baseURL:'http//ip:port'})
                myAxios.intercepter.request.use((config)=>{
                     //设置token到请求头
                     let token = Cookies.get('TOKEN')
                     if(token){
                         config.headers.common['authoriaton'] = token
                     }
                },(error)=>{
                    Promise.reject(error)
                })
//使用myAxios
                1. <script src='./lib/axios.min.js'>
                2. <script src='./lib/request.js'>
                3. myAxios({method:'get',url:'/goods/list'}).then(res=>{}).catch(err=>{})



           </script>

 2. app.all('/*',function(req,res,next){
                 过滤不需要验证请求
                let token =  req.headers.authriation
           })

 

RESTful:

使用url来访问资源的一种方式

URL 就是我们平常使用的请求地址了,其中包括两部分:请求方式与请求路径,比较常见的请求方式是 GET 与 POST,
但在 REST 中又提出了几种其它类型的请求方式,汇总起来有六种:GET、POST、PUT、DELETE、HEAD、OPTIONS。
尤其是前四种,正好与?CRUD(Create-Retrieve-Update-Delete,增删改查)四种操作相对应
例如,GET(查)、POST(增)、PUT(改)、DELETE(删),这正是 REST 与 CRUD 的异曲同工之妙!

REST    请求                描述

  • GET:   /advertisers      获取所有的广告主
  • GET:    /advertiser/1   获取 ID 为 1 的广告主
  • PUT:    /advertiser/1   更新 ID 为 1 的广告主
  • DELETE:  /advertiser/1 删除 ID 为 1 的广告主
  • POST:   /advertiser      创建广告主

虽然 REST 看起来还是很简单的,实际上我们往往需要提供一个 REST 框架,让其实现前后端分离架构,让开发人员将精力集中在业务上,而并非那些具体的技术细节。

软件设计模式:

写代码的一种方式

restfull:定义URL资源访问的一种方式

界面渲染数据显示

axios 简单封装与拦截器使用request.js

  • 创建axios实例封装根地址

  • 封装请求拦截器

 

 最后一定要记得引入文件!

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值