ES6转es5、token、session、cookie

ES6转ES5:

1.npm安装相应的babel,需要安装 babel-cli、babel-preset-es2015

2.新建一个.babelrc文件,添加presets配置项进行配置:persets:[es2015]

3.新建一个dist文件夹,使用babel打包命令打包即可将es6语法转为es5

命令:babel 目标文件 -o dist/文件名

 

Session 、Cookie、Token:

Session:最开始时用户向服务器发请求,服务器会返回sessionID,客户端下次拿着sessionID就可以获取数据,服务器得存储每一个sessionID,压力很大。

Cookie:它的出现是为了减轻服务器压力,这次服务器会返回一个cookie存储用户的信息,cookie将会存储在客户端,下次请求时带给服务器,服务器只需要验证即可。

区别:Seesion存储更加重要的信息,cookie存储其他信息,因为cookie容易被截取。

Token:

1.cookie被截取容易出现跨站请求伪造CSRF,为了防止这一情况,服务器在响应客户端时,会发送一个无序的字符串,这个字符串就是token,token存储在客户端中,由头部的加密算法和中间的用户信息加上尾部的签名组成。

2.客户端获取token后,再次向服务器发送请求需要将其携带,服务器收到token后只需要根据头部的加密算法和尾部的签名就能验证用户登录合法性,减轻了服务器的压力,加强了数据的安全性。

3.由于token存在HTTP请求头中,保证了其无状态性,而且服务器只是生成与验证token,不对session进行操作,可以使负载均衡器将用户数据在各个服务器间传递,加强了扩展性。

4.通过设置ACAO(Access-Control-Allow-Origin)*,可以使扩展的设备实现跨域资源共享(CORS),只要用户有一个token验证成功,那么数据和资源就可以被共享。

代码实现:

axios.interceptors.request.use(
    // 请求成功回调
    function (config) {
        let token = localStorage.getItem(accessToekn)
        if (token) {
            // 将token放入请求头发送给服务器
            config.heraders.accessToekn = token;
            // 返回config
            return config
        }
    },
    // 请求失败回调
    function (error) {
        return Promise.reject(error)
    }
)

 

posted @ 2022-11-18 19:15  新时代的搬砖人  阅读(112)  评论(0)    收藏  举报