前端身份认证

清疚 2022-09-01 00:58 273阅读 0赞

### 前端身份认证 ###

*  在Express中使用Session认证
 *   *  什么是Cookie
     *  Cookie在身份认证中的作用
     *  Session的工作原理
     *  安装express-session中间件
     *  Session认证的局限性
 *  在Express中使用JWT认证机制
 *   *  JWT的使用方式
     *  安装JWT相关的包

# 在Express中使用Session认证 #

Session需要搭配Cookie进行认证

## 什么是Cookie ##

Cookie是存储在浏览器中的一段不超过4kb的字符串，由一系列的键值对组成，以及Cookie有效期、安全期、使用范围的可选属性组成。不同域名下的Cookie是各自独立的，不同域名的不能相互访问各自的Cookie。每当客户端发起请求时，会自动把所有未过期的Cookie一同发送到服务器。

Cookie特性：

*  自动发送
 *  域名独立
 *  过期时限
 *  4kb限制

## Cookie在身份认证中的作用 ##

客户端第一次请求服务器时，服务器通过响应头的形式，向客户端发送一个身份认证的Cookie，而客户端会自动将Cookie保存在浏览器中。之后的每次请求，浏览器会自动将身份认证相关的Cookie，通过请求头的形式发送给服务器，服务器即可借此验证身份。

## Session的工作原理 ##

![Session工作原理][Session]

## 安装express-session中间件 ##

安装express-session中间件

npm i express-session

导入注册并进行配置

const session = require("express-session");
    server.use(session({ 
    	secret:"keyword", // secret 属性的值可以为任意字符串
    	resave: false,  // 固定写法
    	saveUnitialized: true,   // 固定写法 
    }));

配置成功之后，req对象上会多一个session对象，可以通过req.session对象来访问和使用session对象，从而获取用户的关键信息。

向session中存取数据

const nameStr = req.session.user.name; // 取数据
    req.session.user.age = 18; // 存数据

清空服务器保存的session，清空session不会清空所有人的session，而是只会清空当前用户的session

req.session.destroy();

## Session认证的局限性 ##

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

# 在Express中使用JWT认证机制 #

JWT（Json Web Token），是目前最流行的跨域身份认证方案。  
其工作原理如下图所示：  
![JWT工作原理][JWT]  
一句话概括就是：用户的信息通过Token字符串的形式，保存在客户端浏览器中，服务器通过还原Token字符串来认证用户身份。

JWT字符串通常由三部分组成：**Header**(头部)，**Payload**(有效载荷)，**Signature**(签名)。三者之间用英文的点号`.`分隔。  
**Payload**部分是用户的信息经过加密后生成的字符串，而**Header**和**Signature**是安全性相关的部分，是为了保证Token的安全性。

## JWT的使用方式 ##

客户端收到服务器返回的JWT后，通常会将其存储在`LocalStorage`或`SessionStorage`中，此后，客户端每次与服务器通信，都要带上JWT，从而进行身份验证，推荐的做法是把JWT放在HTTP请求头的`Authorization`字段中，格式如下：

Authorization: Bearer <token>

## 安装JWT相关的包 ##

# 用于生成JWT的字符串
    npm i jsonwebtoken

# 用于将JWT字符串解析为json对象
    npm i express-jwt

导入上述两个包

const jwt = require("jsonwebtoken");
    const expressJWt = require("express-jwt");

为保证JWT字符串的安全性，防止JWT字符串在网络传输过程中被破解，我们需要专门定义一个加密和解密的secret密钥，该密钥的作用是在生成JWT字符串时，使用secret密钥对用户信息进行加密处理，最终得到的是加密的JWT字符串。在需要将JWT字符串还原成json对象时，需要用secret进行解密。

// secret的值是自定义的，越复杂越好
    const secretKey = "This is a secretKey";

使用jsonwebtoken包中的sign()方法将对象信息转换为JWT字符串

// sign()方法的三个参数分别是用户信息对象，加密密钥，配置对象
    // 第三个配置对象中的expiresIn表示从token生成多少时间后该token作废 
    const token = jwt.sign({ name:"张三"}, secretKey, {  expiresIn:"30h" });

客户端每次访问那些具有权限的接口时，都需要主动通过请求头的Authorization字段，将token字符串发送到服务器鉴权。  
此时就需要用`express-jwt`这个中间件，自动将客户端发送过来的Token解析为json对象

// expressJWT({ secret:secretKey }); 用来解析Token的中间件
    // .unless({path: /^\/api\//}); 用来指定哪些接口不需要访问权限
    // express-jwt在6.0.0需要配置加密算法的默认值algorithms:["HS256"]
    app.use(expressJWT({  secret:secretKey,algorithms: ["HS256"] }).unless({ path: /^\/api\// }));

当配置好了`express-jwt`中间件后，就可以把从Authorization中解析出来的用户信息挂载到`req.user`上，一开始req上是没有user这个属性的。

[Session]: /images/20220829/ab444cdf6ecd46febbc5f535730bcfd0.png
[JWT]: /images/20220829/57ea7cbf70874fac8bbcad0e171807fa.png