node.js 如何实现身份认证

我们的web开发模式呢分为两种,一种是服务器渲染模式,就是通过服务器进行一个字符串拼接,将html页面拼接出来,然后直接返回给客户端,这样一来就不需要我们的ajax了,直接给客户端就可以了,他的优点呢就是前端耗时少,毕竟都给服务器做了还有前端什么事,还有他也有利于seo优化,他的缺点就是占用服务器资源,而且不利于前后端分离开发效率低。

第二个模式:前后端分离的模式,它是依赖于ajax的一个广泛应用,后端负责编写api接口,前端就负责调用接口就完事了。他的一个优点就是开发体验好、毕竟前后端分离,用户体验也好,也减轻了服务器的压力。

但是缺点就是不利于seo的优化。

什么事身份认证?

通过一定的手段对用户身份进行确认的方式。

服务器渲染开发用的就是session认证,而我们的前后端分离用的就是jwt认证,两者都各有各的优点谁也不让谁。

session

首先了解一下http无状态性,就是指客户端每次的http请求都是独立的,连续多个请求间没有直接关系,服务器也不会主动保留每次http请求状态(就像收银员他能记住每个来的客户是会员吗?)

突破无状态限制。

超市突破这种限制的方式就是给每个会员发会员卡是吧,在我们web领域这种方式就是cookie。

cookie,是存储在用户浏览器一段不超过4kb的字符串,它是由name、value以及有效期。安全性,适用范围的可选属性组成,在不同的域名下,我们的cookie是各自独立的,每当客户端发起请求,会自动把当前域名下的所有cookie发给服务器,注意只是当前域名下。

他的特性就是:自动发送、域名独立、过期时限、4kb限制

cookie在身份认证中的作用

当我们客户端第一次请求服务器的时候,服务器会通过响应头向客户端发送一个身份认证的cookie,我们的浏览器就会把这个cookie存储起来,当我们下一次 请求的时候,就会直接发送这个cookie也就是前面说的会自动发送,即可证明身份。

要注意我们的cookie是不具有安全性的,浏览器还提供了读写cookie的api,所以cookie很容易被伪造,就像我们的会员卡也有伪造的一样。所以不要用cookie存储重要数据,包括我们jwt也不能存后面会说到。

那么有没有方法来提高我们cookie的安全性呢?

那就是session认证,就好比我们的会员卡➕刷卡的机制就能破除伪造卡了。

session认证机制

首先我们的客户端登录账号密码发送了登录请求,服务器会开始验证,当验证成功后,会将其存储在服务器的内存中,同时通过响应头返回一个对应的cookie字符串,我们的浏览器就会把这个字符串保存在当前域名下,当我们再次请求的时候,就会把域名下所有cookie一起发送服务器,服务器就会去找对只对应的cookie匹配成功就能找到你信息了,然后就认证成功了。

说了这么多怎么来再服务器端使用我们的sesson,首先安装导入两部曲然后还需要配置,注意配置是固定写法,secret是可以为任意字符串的。

配置过后就可以用req.session来访问session对象了,将我们的一些数据用sessin存储起来,然后登陆成功又可以通过session取出来,当我们退出登录还可以。destroy方法清空session,注意只是清空这个账户信息,不会清空别人的信息,具体代码如下:

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// TODO_01:请配置 Session 中间件
const session = require('express-session')
app.use(session({
  secret : 'mySession',
  resave : 'false',
  saveUninitiallized: 'ture'
}))

// 托管静态页面
app.use(express.static('./pages'))
// 解析 POST 提交过来的表单数据
app.use(express.urlencoded({ extended: false }))

// 登录的 API 接口
app.post('/api/login', (req, res) => {
  // 判断用户提交的登录信息是否正确
  if (req.body.username !== 'admin' || req.body.password !== '000000') {
    return res.send({ status: 1, msg: '登录失败' })
  }

  // TODO_02:请将登录成功后的用户信息,保存到 Session 中
  // 注意只有当上面配置了session之后才能够使用req.session这个对象
  req.session.user = req.body // 用户信息
  req.session.islogin = true // 用户的登录状态


  res.send({ status: 0, msg: '登录成功' })
})

// 获取用户姓名的接口
app.get('/api/username', (req, res) => {
  // TODO_03:请从 Session 中获取用户的名称,响应给客户端
  // 判断是否登录成功
  if(!req.session.islogin) {
    return res.send({status:1, msg:'fail'})
  }
  // 登录成功即可响应数据
  return res.send({
    status : 0,
    msg : 'success',
    username : [req.session.user.username]
  })
})

// 退出登录的接口
app.post('/api/logout', (req, res) => {
  // TODO_04:清空 Session 信息
  req.session.destroy()
  res.send({
    status : 0,
    msg : '退出登录成功'
  })
})

// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1:80')
})

这就是session,然后我们看到下一个认证机制jwt,session需要cookie才能够实现是吧,但我们的cookie有一个致命问题,不支持跨域,如果涉及到跨域需要配置很大一堆步骤。

JWT目前最流行跨域认证解决方案。

实现原理:首先还是客户端发起一个请求头发送账号密码,服务器验证,验证成功后会经过加密生辰一个token字符串然后会给你返回一个token字符串,我们拿到这个token字符串会将其存储在localstorage或者sessionStorage中,当我们再次请求就会通过一个authorization的请求头将token发送给服务器,服务器拿到token就会将他还原成用户的信息对象,然后身份也就认证成功了。

JWT的组成部分是有三部分组成:header。patyload。signature,这个。只是分割作用,我们的真正信息重在中间的payload前后两个只是保证token的安全性。

怎么在express中来使用我们的token?

需要安装两个包,还需要定义密匙是自己自定义的

第四步生成JWT字符串的时候在sign这个方法里面,这个配置有效期是token在规定期限之内能够拿来验证的期限;

第五步将jwt转换为json这个语句当中,unless这个语句的意思是不需要身份验证的接口

配置完第五步转换为json文件后我们就可以用req.user来获取信息了,而这个信息就是我们第四步把什么转换为jwt字符串的信息,

最后当我们的token过期或者不合法就会出现错误,这个时候要需要一个错误中间件:

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// TODO_01:安装并导入 JWT 相关的两个包,分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const expressJwt = require('express-jwt')
// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
const { UnauthorizedError } = require('express-jwt')
const { response } = require('express')
app.use(bodyParser.urlencoded({ extended: false }))

// TODO_02:定义 secret 密钥,建议将密钥命名为 secretKey
const secretKey = 'hard hard study day day up'
// TODO_04:注册将 JWT 字符串解析还原成 JSON 对象的中间件
app.use(expressJwt({secret : secretKey, algorithms : ['HS256']}).unless({path : [/^\/api\//]}))
// 登录接口
app.post('/api/login', function (req, res) {
  // 将 req.body 请求体中的数据,转存为 userinfo 常量
  const userinfo = req.body
  // 登录失败
  if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
    return res.send({
      status: 400,
      message: '登录失败!'
    })
  }
  // 登录成功
  // TODO_03:在登录成功之后,调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
  // 转化成token加密文件
  const tokenStr = jwt.sign({username : userinfo.username, algorithms : ['HS256']}, secretKey, {expiresIn : '1h'})
  res.send({
    status: 200,
    message: '登录成功!',
    token: tokenStr // 要发送给客户端的 token 字符串
  })
})

// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
  // TODO_05:使用 req.user 获取用户信息,并使用 data 属性将用户信息发送给客户端
  
  res.send({
    status: 200,
    message: '获取用户信息成功!',
    data: {username : req.user} // 要发送给客户端的用户信息
  })
})

// TODO_06:使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  if (err.name === 'UnauthorizedError') {
    // 这次错误是由token解析失败导致的
    return res.send({status : 401, msg : '无效的token'})
  }else {
    // 其他错误
    return res.send({status: 500, msg : '未知的错误'})
  }
})
// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(8888, function () {
  console.log('Express server running at http://127.0.0.1:8888')
})

下一章:JS 获取元素大小、偏移量及鼠标位置

JS 获取元素宽度、偏移量的几个常用属性的方法。获取元素宽度 widthclientWidthoffsetWidthscrollWidth组成contentcontent+paddingcon ...