Vue+element+Nodejs学习记录（3）

浅浅的花香味﹌ 2021-11-14 11:44 298阅读 0赞

**1.常见的两种登陆方式**

参考文章：https://zhuanlan.zhihu.com/p/62336927

登录就是用某种方法让服务器在多次请求之间能够识别出你，而不是每次发请求都得带上用户名密码这样的识别身份的信息。

从登录成功到登出的这个过程，服务器一直维护了一个可以识别出用户信息的数据结构，广义上来说，这个过程就叫做session，也就是保持了一个会话。

广义的session和狭义的session

广义的session：广义的session就是从登录成功到登出的过程，在这个过程中客户端和服务器端维持了保持登录的状态，至于具体怎么维持住这种登录的状态，没有要求。

狭义的session：狭义的session就是登录成功后，服务器端存储了一些必须的用户信息，这部分存在服务器端的用户信息就叫做session

1.第一种登陆方式

**服务器session+客户端sessionId**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

这里面主要是这么几个过程：  
1.客户端带着用户名和密码去访问 /login 接口，服务器端收到后校验用户名和密码，校验正确就会在服务器端存储一个sessionId和session的映射关系

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
2. 服务器端返回response，并且将sessionId以set-cookie的方式种在客户端，这样一来，sessionId就存在了客户端。这里要注意的是，将sessionId存在cookie并不是一种强制的方案，而是大家一般都这么做，而且发请求的时候符合domain和path的时候，会自动带上cookie，省去了手动塞的过程。

3.客户端发起非登录请求时，服务端通过cookie中的sessionId找到对应的session来知道此次请求是谁发出的。

2.第二种登陆方式

**token**

前面说到sessionId的方式本质是把用户状态信息维护在server端，token的方式就是把用户的状态信息加密成一串token传给前端，然后每次发请求时把token带上，传回给服务器端；服务器端收到请求之后，解析token并且验证相关信息；

所以跟第一种登录方式最本质的区别是：通过解析token的计算时间换取了session的存储空间。

业界通用的加密方式是jwt。

两种登陆方式存在的问题

**session方式**

1.session方式由于会在服务器端维护session信息，单机还好说，如果是多机的话，服务器之间需要同步session信息，服务横向扩展不方便。  
2.session数量随着登录用户的增多而增多，存储会增加很多。  
3.session+cookie里面存sessionId的方式可能会有csrf攻击的问题，常见的方式是使用csrf\_token来解决

**jwt方式**

jwt的过期时间需要结合业务做设置，而且jwt一旦派发出去，后端无法强行使其作废。

**2.session，cookie和token**

存储在浏览器的一段字符串（最大4kb）  
跨域不共享（跨域：协议、域名、端口不一样）  
格式如k1=v1;k2=v2;k3=v3;因此跨域存储结构化数据

每次发送http请求，会将请求域的cookie一起发送给server  
server可以修改cookie并返回给浏览器  
浏览器中也可以通过JavaScript修改cookie（有限制，服务端设置httpOnly后浏览器端不能修改）（通过document.cookie浏览器端可以获取cookie）

session

cookie的问题：会暴露username等用户信息，很危险  
如何解决：cookie中存储userid/sessionid，server端对应username  
解决方案：session，即server端存储用户信息

cookie通过在客户端记录信息确认用户身份，Session通过在服务器端记录信息确认用户身份

更多可以参考下面文章，session，cookie和token讲的很好：  
（重点推荐）https://segmentfault.com/a/1190000017831088  
http://bubkoo.com/2014/04/21/http-cookies-explained/  
https://blog.51cto.com/zhibeiwang/1965018

**3.cookie用于登陆验证**

登陆cookie用后端生成到返回头中。前端返回头中（header）拿到cookie。再次进入该网站请求时候就携带cookie进行验证。

//app.js中解析cookie
    req.cookie = {}
    const cookieStr = req.headers.cookie || '' // k1=v1;k2=v2;k3=v3
    //转换cookie格式{k1:v1,k2:v2,k3:v3}
    cookieStr.split(';').forEach(item => {
        if (!item) {
            return
        }
        const arr = item.split('=')
        const key = arr[0].trim()
        const val = arr[1].trim()
        req.cookie[key] = val //存储在req.cookie中，可以在任何一个中间件中获取和设置，很方便
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
router/user.js中后台设置cookie和验证

//获取cookie的过期时间
    const getCookieExpires = () => {
    
    	const d = new Date()
    	d.setTime(d.getTime() + (24*60*60*1000) ) 
    	return d.toGMTString()
    
    }
    
    const handleUserRouter = (req,res)=> {
    
    	const method = req.method //GET POST
    
    	//登陆
    	if (method === 'POST' && req.path === '/api/user/login') {
    
    		const {username,password} = req.body
    		const result = login(username,password)
    
    		result.then( data => {
    			if(data.username){
    
    				//通过服务端设置cookie，并返回给客户端
    				res.setHeader('Set-Cookie',`username=${data.username};path=/;httpOnly;expires=${getCookieExpires()}`)
    
    				return new SuccessModel()
    			}
    
    			return new ErrorModel('登陆失败')
    		})
    
    	}
    
    	//登陆验证的测试
    	if(metho === 'GET' && req.path === 'api/user/login-test)'{
    		if(req.cookie.username){
    			return Promise.resolve(new SuccessModel())
    		}
    		return Promise.resolve(new SuccessModel())		
    	}
    
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
**4.session用于登陆验证**

整体过程：SESSION\_DATA存储全局session数据，用户信息按照userid/sessionid存储到SESSION\_DATA中，服务端管理这些数据。服务端生成userid/sessionid发送到客户端，客户端通过cookie中携带的userid/sessionid获取SESSION\_DATA中的对应的session数据。获取到的session数据，赋值到req.session中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]  
app.js

router/user.js

const {login} = require('../controller/user')
    const {SuccessModel,ErrorModel} = require('../model/resModel')
    
    //获取cookie的过期时间
    const getCookieExpires = () => {
    
    	const d = new Date()
    	d.setTime(d.getTime() + (24*60*60*1000) ) 
    	return d.toGMTString()
    
    }
    
    
    const handleUserRouter = (req,res)=> {
    
    	const method = req.method //GET POST
    
    	//登陆
    	if (method === 'POST' && req.path === '/api/user/login') {
    
    		const {username,password} = req.body
    		const result = login(username,password)
    
    		result.then( data => {
    			if(data.username){
    
    				/*
    				req.session = SESSION_DATA[userid] 。
    				这样，SESSION_DATA[userid] 和 req.session 两个变量的指针就指向了同一个对象，
    				因此修改 req.session 的值，也会同步修改 SESSION_DATA[userid] 的值。
    				JS 引用类型的基础知识，例如 var a = {}; b = a ; b.name = 'xxx'; a.name 是多少？
    				*/
    				//设置session，所以登陆时的username和realname都保存到SESSION_DATA中了
    				req.session.username = data.username
    				req.session.realname = data.realname
    
    				return new SuccessModel()
    			}
    
    			return new ErrorModel('登陆失败')
    		})
    
    	}
    
    	//登陆验证的测试
    	if(metho === 'GET' && req.path === 'api/user/login-test)'{
    		if(req.session.username){
    			return Promise.resolve(new SuccessModel(
    				session:req.session
    			))
    		}
    		return Promise.resolve(new SuccessModel())		
    	}
    
    }
    
    module.exports = handleUserRouter

**5.redis**

session的问题：  
目前session直接是js变量，放在nodejs进程内存中，session过大时，会把进程的空间挤爆  
多进程之间，数据无法共享

解决session的redis解决方案：  
之前都是把session放在web server（进程的变量、进程的内存中）中。现在把session放在redis中存储，就能避免内存过大把进程的空间挤爆的问题。  
进程之间数据无法共享问题：进行数量的多少跟redis没有关系。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]  
为何session适合用redis？  
session访问频繁，对性能要求极高，redistribution是内存数据库，MySQL是硬盘数据库  
session可不考虑断电丢失数据的问题（内存的硬伤）  
session数据量不会太大（相比于MySQL中存储的数据）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]  
为何网站数据不适合用redis？  
1.操作频率不是很高（相对于session操作）  
2.断电不能丢失，必须保留  
3.数据量太大，内存成本太高  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]  
redis安装和启动：

https://www.runoob.com/redis/redis-install.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211114/d0bb24b5cc104f519de4db13988bd981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20211114/8b9b084a3d4c4486ba8ba16095152ebb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20211114/2a9c9fe3668a47078756e6794293e6eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20211114/cee2af32a4c447cf80573f97c80ec35e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20211114/35f72b2618d343dda948b8e11778a42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20211114/8508dceef508491f89acdf1dd7322107.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20211114/9fe528f35ea24ac7a549937abe39a9d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20211114/829b6246fd564dff8386d9c234dc7049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: /images/20211114/0cc0bc7dfd994bae931bc4bb6af53d30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: /images/20211114/6e4c970957c6415898416880a1f9057e.png