PC端触底分页

PC端触底分页

if(滚动条距顶高度+可视区高度>=文档页面的高度){
  触发分页
}

身份认证

概念

权限管理分为两种：
	1 身份认证 ：是否登录，登录是否过期
	2 权限操作 :在登录成功的前提下，每个账号的等级不同，造成看到的，能够操作的组件是不同

技术分类

1 后端采用session 前端采用cookie
2 后端采用JWT ，前端采用localStorage

jwt

jsonwebtoken   
token：临时的身份令牌，成功登录之后，后台送一个token身份令牌，以后拿着这个令牌就能够畅通无阻的访问后台的其他接口,否则是不允许访问其他接口，如果强行访问，则报错401 --》身份未认证成功的错

流程

1 如果未登录或过期直接访问后台其他接口，则报错401，反之则放行，正常拿到目标接口
2 登录成功后----》生成token（很长的加密之后的字符串,里面一般存储的是userInfo对象）----->响应给浏览器
  -------》通过localStorage保存到本地-----》以后通过把token挂载到请求头上，后端node就能够自动验证是否合法
  ------->如果验证成功，则放行，如果失败则报错401，客户端处理报错（自动跳转到登录页面）
  

请求报文和响应报文

请求报文：从上到下分别是请求行、请求头、 请求体
响应报文：从上到下分别是响应行、响应头、 响应体

请求报文

请求行：
GET /stus/getStusByPage?pageindex=1&pagesize=3  HTTP/1.1
POST /stus/upd HTTP/1.1

get请求的请求参数会附加在请求行的url通过?拼接
post请求的请求参数在请求体

请求头：(每次发送请求都会自动携带某些参数)
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 102
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: localhost:3000
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

请求体：
装post请求参数的（get请求是没有请求体的）

HTTP协议版本：

资源：每一个js、每一个css、每一个html、每一个媒体（图片等）都是一个资源

1.0  :在一次访问中，有多少个资源(请求)，就会连接-断开多少次
1.1  :在一次访问中，只会连接一次，拿到所有资源后才断开连接
2.0  :承载资源的载体从1.x的字节 变成了 二进制  （传输文件的速度变快了）

准备工作

局部安装插件
1 jsonwebtoken  :负责生成token、解码token
2 express-jwt   ：负责拦截和验证token

安装 npm i jsonwebtoken express-jwt

步骤

1 配置拦截文件

utils/jwtAuth.js

let {expressjwt}=require("express-jwt")
let {secret}=require('./const')
let jwtAuth=expressjwt({
    //自定义密钥(生成token、解码token都的用到该密钥)
    secret,
    //加密算法
    algorithms:['HS256'],
    //默认只能拦截token过期，如果设置为true，则不携带token或者token过期都会被拦截
    credentialsRequired:true
}).unless({
    //白名单 不拦截的请求
    path:['/users/login','/users/register','/users/checkUsername']
    // path:['/users/']
})
//暴露
module.exports=jwtAuth

自行测试是否成功

2 前端捕获401异常，并且给客户反馈

 $.ajax({
            url: "xxxx",
            data: {
              
            },
            error(res){
                if(res&&res.status==401){
                    alert("请求登录")
                    parent.location.href="./login.html"
                }
            },

3 全局注册ajax捕获401异常

public/js下新建401.js

 //ajax全局注册,全局指的是当前页面，一旦注册之后，则当前页面的其他所有ajax都拥有注册后的属性
 $.ajaxSetup({
    error(res){
        if(res&&res.status==401){
            alert("请求登录")
            parent.location.href="./login.html"
        }
    },
})

最后在所需页面中引入401.js即可(放在引入的jquery.js下面)

4 登录成功好生成token，响应token给客户端，客户端本地保存token

服务器：

let jsonwebtoken=require('jsonwebtoken')
let {secret}=require('../utils/const')

//登录
async function login(req, res, next) {
  //接受参数
  let { username, password } = req.query;
  let result = await usersModel.find({ username, password })
  if (result.length > 0) {
    //成功
    //生成token
    let token=jsonwebtoken.sign(
      {user:result[0]},//指定需要保存的用户对象
      secret,//秘钥
      {expiresIn:10}//设置token过期时间
    )


    res.send({
      code: 200,
      token:"Bearer "+token
    })

  } else {
    //失败
    res.send({
      code: 500,
    })
  }



}

客户端：

 //登录
        $("#login").click(function(){
            $.ajax({
                url:"/users/login", 
                data:{
                    username:$("#username").val(),
                    password:$("#password").val(),
                },
                success(res){
                    console.log(res);
                    if(res.code==200){
                        alert("登录成功")
                        // location.href="./show.html"   
                         //存储本地
                         localStorage.token=res.token;
                         
                         location.href="/html/main.html"
                       

                    }else{
                        alert("登录失败")
                    }
                }
            })
        })

5 以后访问时需要把token挂载到请求头中

只要在请求头中挂载好token，则服务器会自动验证（整个验证过程我们是不用管的）

401.js

 //ajax全局注册,全局指的是当前页面，一旦注册之后，则当前页面的其他所有ajax都拥有注册后的属性
 $.ajaxSetup({
    error(res){
        if(res&&res.status==401){
            alert("请求登录")
            parent.location.href="./login.html"
        }
    },
    headers:{
        Authorization:localStorage.token
    },
})

6 解码

async function getUserInfo(req, res, next) {
    //获取请求头的数据：
    let str=req.get("Authorization");
    let token=str.split(" ")[1];
    let {user}=jsonwebtoken.verify(token,secret)
    res.send({
      code:200,
      user
    })
}