前后端的身份认证:Session&JWT

1.Web开发模式

​ Web开发模式有两种,分别是传统的web开发模式和前后端分离的web开发模式。

1.基于服务器端渲染的传统Web开发模式

​ 服务器通过字符串的拼接,动态生成html页面发送给客户端。因此,不需要ajax这样的技术额外请求页面的数据。

示例:

app.get('/index.html',(req,res)=>{

// 1.要渲染的数据
const user = {uname:'关羽',age:20}
// 2.服务器通过字符串的拼接动态生成html内容
const html = '<h1>姓名:${user.name},年龄:${user.age}</h1>>'
// 3.把生成好的页面内容响应给客户端
res.send(html)
}) 

优点:

• 前端耗时少。服务器端负责动态的生成html页面,浏览器只需要直接渲染页面即可。
• 有利于SEO。因为服务器端响应的是完整的html页面,所以爬虫更容易爬取获得信息。

缺点:

• 占用服务器资源。
• 不利于前后端分离,开发效率低。

2.基于前后端分离的新型Web开发模式

​ 前后端分离的开发模式依赖于ajax的广泛应用。后端只负责提供api接口,前端使用ajax调用接口的开发模式。

示例:

// 前端发起ajax请求
		$.ajax({
                method: 'Get',
                url: 'http:127.0.0.1:8080/api/get',
                data:{},
                success: res => {
                    console.log(res)
                }
            })

// 后端处理请求,响应处理结果
// 编写get接口
		app.get('/api/get', (req, res) => {
    			const sql = 'select * from table'	
        		db.query(sql, (err, results) => {
        		if (err) return res.cc(err)
        		res.send({
            		status: 0,
            		message: '获取table列表成功！',
            		data: results
        		})
   		 	})                                  
		})

优点:

• 开发体验好。前端专注于UI页面的开发,后端专注于api开发,且前端有更好的选择性。
• 用户体验好。ajax技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
• 减轻了服务器的渲染压力。因为页面最终是在每个用户的浏览器生成。

缺点:

• 不利于SEO。因为完整的html需要在客户端动态拼接完成,所以爬虫无法爬取页面的有效信息。
• 解决方案: 利用vue,react等前端框架的ssr技术能够很好的解决seo问题。

具体使用何种开发模式不是绝对的,需要看业务场景来选择开发模式更合理。

2.身份认证

​ 身份认证(Authentication)又称"身份验证","鉴权",是指通过一定的手段,完成对用户身份的确认。在web开发中,涉及到用户身份认证如: 各大网站的手机验证码登录,邮箱密码登录,二维码登录等。

http协议的无状态性

​ http协议的无状态性,指的是客户端的每次http请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次http请求的状态。我们需要通过身份认证的方式突破http协议的无状态性。

1.Session认证机制

1.Cookie

​ Cookie是存储在用户浏览器的一段不超过4kb的字符串。它由一个名称(name),一个值(value)和

其他用于控制Cookie有效期、安全性、使用范围的可选属性组成。

1.Cookie的工作原理

​ 客户端在第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的Cookie,客户端将Cookie保存在浏览器中。随后当客户端每次请求服务器的时候,浏览器都会自动将身份认证相关的Cookie,通过请求头的形式发送到服务器,服务器即可验明客户端的身份。

2.Cookie不具有安全性

​ 由于Cookie是存储在浏览器中的,而且浏览器也提供了读写Cookie的API,因此Cookie很容易被伪造,不具有安全性。因此不建议服务器将重要隐私的数据,通过Cookie的形式发送给浏览器。如身份信息、密码等。

2.Session

​ Session是在服务器端创建的一种数据结构，用于存储用户的会话信息。

1.session的工作原理

​ 当客户端第一次发送请求时时，服务器会为该用户创建一个唯一的Session ID，并将该ID存储在Cookie中然后发送给客户端。每次用户发送请求时，服务器会根据Session ID查找用户的Session，并从中读取或写入数据。

2.session认证的局限性

​ Session认证机制需要配合Cookie才能实现。由于Cookie默认不支持跨域访问,所以当涉及到前端跨域请求后端的接口时,需要做很多额外的配置,才能实现Session认证。

session与cookie的区别:

​ session的存储位置在服务器端，而Cookie的存储位置在客户端，因此Session的安全性更高一些。

Session认证机制过程:

客户端发送登录的请求(提交账号与密码)->服务器验证账号密码->将登录成功后的用户信息存储在服务器的内存中,同时生成对应的Cookie字符串->将生成的Cookie响应给客户端->客户端的浏览器中自动把Cookie保存在当前的域名下->客户端再次发起请求时通过请求头自动把当前域名下所有可用的Cookie发送给服务器->服务器根据请求头中携带的Cookie,从内存中查找对应的用户信息->用户身份认证完成后,服务器针对当前用户生成指定的响应内容->把当前的响应内容响应给客户端。

3.Express中使用session认证

1.安装session中间件

npm install express-session

2.导入session

const session = require('express-session')

3.注册并配置session

app.use(session({

    secret: 'pancc',            // secret 属性的值可以为任意字符串
    resave: false,              // 固定写法
    saveUninitialized: true     // 固定写法
}))

4.向session中存数据

req.session.user = req.body		// 保存用户信息
req.session.islogin = true      // 保存用户登录状态

5.从session中取数据

res.send({
        username: req.session.user.username
    })

6.清空session

req.session.destroy()

示例:

const express = require('express')
const app = express()
// 1：配置 Session 中间件
const session = require('express-session')
app.use(session({

    secret: 'pancc',           
    resave: false,              
    saveUninitialized: true    
}))

app.use(express.static('./pages'))
app.use(express.urlencoded({ extended: false }))

// 登录接口
app.post('/api/login', (req, res) => {
    if (req.body.username !== 'admin' || req.body.password !== '000000') {
        return res.send({ status: 1, msg: '登录失败' })
    }

    // 2：将登录成功后的用户信息，保存到 Session 中
    req.session.user = req.body     // 保存用户信息
    req.session.islogin = true      // 保存用户登录状态
    res.send({ status: 0, msg: '登录成功！' })
})

// 获取用户姓名的接口
app.get('/api/username', (req, res) => {
    // 3：从 Session 中获取用户的名称，响应给客户端
    if (!req.session.islogin) {
        return res.send({ status: 1, msg: 'fail' })
    }
    res.send({
        status: 0,
        msg: 'success',
        username: req.session.user.username
    })
})

// 退出登录的接口
app.post('/api/logout', (req, res) => {
    // 4：清空 Session 信息
    req.session.destroy()
    res.send({

        status: 0,
        msg: '退出登录成功！'
    })
})

app.listen(8080, function () {
    console.log('Express server running at http://127.0.0.1:8080')
})

• 只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
• 调用req.session.destroy()只会清空当前用户对应的session

2.JWT认证机制

​ JWT(JSON Web Token)是目前最流行的跨域认证解决方案。

1.JWT的工作原理

​ 用户的信息通过Token字符串的形式,保存在客户端浏览器中,服务器通过还原Token字符串的形式来认证用户的身份信息。

2.JWT与Session的区别

​ JWT中用户的信息是通过token字符串的形式保存在浏览器端,而Session用户的信息是保存在服务器端。

3.JWT的使用方式

​ 客户端收到服务器返回的token字符串后,通常会保存在locakStorage或sessionStorage中,此后,客户端每次与服务器通信,都要带上这个token字符串,从而进行身份认证。token字符串放在Http请求头的Authorization字段中。

Authorization

// 使用方式
Authorization: Bearer <token>

4.JWT的组成部分

​ JWT由三部分组成: Header(头部)、Payload(有效荷载)、Signature(签名)

// 三者之间使用.分隔
Header.Payload.Signature

• Payload部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串
• Header和Signature是安全性相关的部分,只是为了保证Token的安全性。

JWT认证机制认证过程:

客户端发送登录的请求(提交账号与密码)->服务器验证账号密码->验证通过后将用户信息对象,经过加密之后生成Token字符串->将生成的Token响应给客户端->客户端的浏览器把Token存储到LocalStorage或SessionStorage->客户端再次发起请求时通过请求头的Authorization字段,将Token发送给服务器->服务器把Token字符串解密还原成用户的对象信息->用户身份认证完成后,服务器针对当前用户生成指定的响应内容->把当前的响应内容响应给客户端。 

1.Express中使用JWT认证

1.安装JWT相关包

npm install jsonwebtoken express-jwt

• jsonwebtoken: 用于生成token字符串
• express-jwt: 用于将token字符串解析还原成json对象

2.导入JWT包

const jwt = require('jsonwebtoken')
var { expressjwt: expressJWT } = require('express-jwt')

3.定义secret密钥

const secretKey = 'pancc No1 ^_^'

• 生成token字符串的时候,需要用到secret密钥对用户的信息进行加密,最终得到token字符串
• 解析token字符串还原成JSON对象的时候,需要用到secret密钥进行解密

4.生成token字符串

const tokenStr = jwt.sign(
		{ username: userinfo.username }, 
		secretKey, 
		{ expiresIn: '60s' }
)

• 调用jsonwebtoken包提供的jwt.sign()方法,将用户的信息加密成token字符串,响应给客户端
• 三个参数分别是: 用户信息对象,加密密钥,配置对象(配置当前 token 的有效期)

5.token字符串解析还原成json对象

app.use(expressJWT({ 
		secret: secretKey, 			
		algorithms: ["HS256"] 
		}).unless({ path: [/^\/api\//] }))	

• 客户端每次在访问那些有权限的接口的时候,都需要主动通过请求头中Authorization字段,将Token字符串发送到服务器进行身份认证
• 服务器可以通过express-jwt这个中间件,自动将客户端发送过来的token解析还原成JSON对象
• secret用于指定解密的密钥,unless()中指定的配置对象
• path: 可以指定一个数组,来告诉我们哪些接口不需要访问权限

示例:

const express = require('express')
const app = express()

// 1：导入JWT相关的两个包，分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
var { expressjwt: expressJWT } = require('express-jwt')

// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

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

// 2：定义 secret 密钥,建议将密钥命名为secretKey
const secretKey = 'pancc No1 ^_^'

// 4：注册将 JWT 字符串解析还原成 JSON 对象的中间件
app.use(expressJWT({ secret: secretKey, algorithms: ["HS256"] }).unless({ path: [/^\/api\//] }))

// 登录接口
app.post('/api/login', function (req, res) {

    const userinfo = req.body
    if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
        return res.send({
            status: 400,
            message: '登录失败！',
        })
    }
    // 3：调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
    // 注意：不要把密码加密到 token 字符中
    const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '60s' })
    res.send({
        status: 200,
        message: '登录成功！',
        token: tokenStr, 		// 要发送给客户端的 token 字符串
    })
})

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

// 6：注册全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {

    if (err.name === 'UnauthorizedError') {

        return res.send({
            status: 401,
            msg: '无效的token'
        })
    }
    res.send({
        status: 500,
        msg: '未知的错误'
    })
})

app.listen(8888, function () {
    console.log('Express server running at http://127.0.0.1:8888')
})

• 只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
• 在最后可以通过Express注册全局错误的中间件,捕获token错误并进行相关的处理
• 判断err.name === 'UnauthorizedError' 是的话说明这个token无效。

对于服务端渲染和前后端分离这两种模式来说,不同模式有不同的身份认证方案

• 服务器端渲染推荐使用Session认证方案
• 前后端分离推荐使用JWT认证机制