vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue前端设置Cookie和鉴权

Vue前端如何设置Cookie和鉴权问题详解

作者:月上初小

这篇文章主要介绍了前端如何设置和使用Cookie,并对比了Cookie和Token在鉴权中的优缺点,文中通过代码介绍的非常详细,需要的朋友可以参考下

前景:

本周五的时候后端让我从前端工程中排查,有没有设置cookie。在我连续说了没有的情况下,连续四次被质疑。最后以我发四说没有,不欢而散。 基于对前端的不信任,写个小作文来说明vue前端怎么设置cookie

Cookie的概念性质的东西这里不赘述。

一:Cookie生成机制

二:服务端生成

服务器端通过设置Set-Cookie 的 Expires 和 Max-Age两个属性来设置cookie的有效期

1、Expires 

Set-Cookie: sessionId=abc123; Expires=Thu, 01 Jan 1970 00:00:00 UTC;

Expires 的值必须是一个完整的日期和时间,包括年、月、日、时、分、秒和时区。

2、Max-Age

Set-Cookie: sessionId=abc123; Max-Age=0;

Max-Age的值是个秒值。

同时设置这俩属性时,Max-Age 的优先级高于Expires

三:客户端生成方式

1、document.cookie

// 设置cookie
document.cookie = 'sessionId=abc123; path=/'

// 获取Cookie值
const getCookie = name => {
  var cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    const [key, value] = cookies[i].split("=")
    if (key.trim() === name) {
      return value;
    }
  }
  return ""
};


// 删除cookie 
// 方式:将cookie的 过期时间(expires)属性指定为一个过去的时间
const deleteCookie = name => { 
  document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';  
}
deleteCookie('password');

2、js-cookie

import Cookies from 'js-cookie';  

// 设置cookie  
Cookies.set('sessionId', 'abc123');  
  
// 获取cookie  
const sessionId = Cookies.get('sessionId');  
  
// 删除cookie  
Cookies.remove('sessionId');

四:--------- 我是分割线 ---------

前端是否设置cookie,工程中全局搜索cookie关键字,就能判断前端是否做了特殊处理。

cookie通过浏览器自动管理,大多数情况下前端并不需要处理cookie。

浏览器本地数据存储:建议使用web storage(包括localStorage和sessionStorage)。更大的存储空间(5M左右),提供了多个属性和方法,数据操作更简单。

五:鉴权

1)cookie的缺点

因上面的缺点,cookie不适合做鉴权,需要用session配合。

2)Session

Cookie将内容(key、value等信息)通过响应头返回。如果这些内容不直接返回,而是保存在服务器端,给内容取个名字叫session上下文,给上下文取个id叫SessionId(随便叫什么id都行)。客户端跟服务器端通过SessionId关联。

SessionId通常以Cookie的形式存储在客户端。但Cookie并不是唯一方式,URL也可以。不过URL方式对用户不友好,所以基本上没有互联网项目会采用这种方案。

Session的问题

cookie或者sesssion,都是后端在主导,前端相关的动作都是由标准浏览器来完成。js在其中只是用户体验的工作,而不是逻辑功能层面的工作

现在最普遍的鉴权方案是:Token。

3)Token

Token 是在服务端产生的。前端使用用户名/密码向服务端请求认证,服务端认证成功,那么服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。

Token的全称是JSON Web Token,简称jwt。

详述

前端使用用户名/密码向服务端请求认证,服务端认证成功后,将用户id等信息进行打包,打包时利用secret(HS256算法、RS256算法等)加密,那么服务端会返回 Token 给前端。

前端拿到token,是解不开的,因为服务器肯定不会把secret传给前端,让前端去解。

前端可以在每次请求的时候带上 Token 证明自己的合法地位。后端在请求头(一般放在请求头)中拿到这个Token,进行验证。验证主要是两个层面:签名是否有效,是否过期。

总结

到此这篇关于Vue前端如何设置Cookie和鉴权问题的文章就介绍到这了,更多相关Vue前端设置Cookie和鉴权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文