219. 单页应用 会话管理(session、cookie、jwt)

Stella981 等级 228 0 0

原文链接:https://github.com/ly525/blog/issues/219

关键字:http-only, cookie,sessionid, vue-router, react-router, 安全localStorage, jwt

需求描述

  1. 内部管理平台,需要用户登录之后才能访问。现在将 该平台地址(www.xxx.com/home) 直接发给新来的运营同学
  2. 前端需要检测该用户是否已登录,如果未登录,则将其 redirect 到登录页面
  3. 因为该页面为单页应用,路由跳转不涉及后端的 302 跳转,使用前端路由跳转

实现思路

实现代码

// 以 vue-router 为例
// 登录中间验证,页面需要登录而没有登录的情况直接跳转登录
router.beforeEach((to, from, next) => {
  const hasToken = document.cookie.includes('sessionid');
  // 如果采用 jwt,则同样 hasToken = localStorage.jwt
  const pathNeedAuth = to.matched.some(record => record.meta.requiresAuth);
  // 用户本地没有后端返回的 cookie 数据 && 前往的页面需要权限
  // 
  if (pathNeedAuth && !hasToken ) {
    next({
      path: '/login',
      query: { redirect: to.fullPath },
    });
  } else if (hasToken && to.name === 'login') {
    // 已登录 && 前往登录页面, 则不被允许,会重定向到首页
    next({
      path: '/',
    });
  } else {
    next();
  }
});
  1. 应该在进入任何页面之前,判断:

    1. 该页面是否需要权限才能访问:登录、注册页面不需要权限

    2. 用户是否已经登录:本地 cookie (或者 localStorage)包含 session 相关信息

      Cookie: csrftoken=YaHb...; sessionid=v40ld3x....

  2. 如果 A页面需要权限本地 cookie中包含了 sessionid 字段,则允许访问A页面,否则跳转到登录页面

    1. 备注:sessionid 该字段由用户在登录之后,由后端框架通过 response.setCookie 写入前端 ,因此该字段需要和后端同学确认
    2. 需要后端同学在 response header 中配置cookie中该字段的 http-only属性,允许前端读取 cookie。否则前端通过 document.cookie 读取到的 cookie 将不包含 sessionid 字段
    3. 这个时候,可能会存在 js 读取cookie 导致不安全的情况,后端同学可以把 cookie 中的某个字段设置为 允许读取,其他 cookie 设置不允许读取,这样即使被第三方不安全脚本获取,也无法产生负面影响。
  3. 如果用户已登录 && 在浏览器中输入了登录页地址,则将其重定向到首页

更多说明

  1. 这样做,前端就不必再向后端发起 API 做权限鉴定了(后端返回401,前端跳转到 401),减少不必要的API 请求,特别是如果在API响应时间过长的情况下,体验不太友好。

  2. 用户修改 cookie,伪造 sessionid

    1. 这样的话,前端就无能为力了,前端鉴权此时认为该用户合法。此时访问首页,将会调用获取数据的API。
    2. 浏览器会将 用户伪造的 sessionid 带给后端,这时候就需要后端对 sessionid 进行较验了。比如校验前端带来的 sessionid 与数据库中的 sessionid 是否一致
    3. 用户伪造的数据 sessionid 和 后端数据库中 sessionid 的概率 非常非常低,可以忽略不计,因为 sessionid 的位数一般在 32 位以上,因为里面包含了字母和数字,也就由 32 ^ 36 种可能
    4. 结论:伪造没有意义,即使用户可以看到页面的样子,但是看不到数据
  3. 采用 localStorage 而不是 sessionStorage 的原因(SessionStorage 失效场景)

    原因:sessionStorage 无法跨 Tab 共享

    1. 用户在新打开一个 Tab,输入已经登录之后的某个页面
    2. 通过target="_blank" 来打开新页面的时候,会导致会话失效
    3. 在当前页面执行 Duplicate (复制 Tab),sessionStorage 失效
收藏
评论区

相关推荐

go语言web开发框架_Iris框架讲解(六):Session的使用和控制
在实际的项目开发中,我们会经常有业务场景使用到Session功能。在iris框架中,也为我们提供了方便使用,功能齐全的Session模块。Session模块的源码目录为kataras/iris/sessions包。 Session与Cookie的区别 在学习web开发过程中,我们总会和session和cookie打交道。本节课我们学习sesion相关的
cookie和session的详解与区别
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。 本章将系统地讲述Cookie与Session机制,并比较说明什么时候不能用Cookie,什么时候不能用Session。 1.1  C
PHP Cookie与Session的使用与区别
Cookie与SessionCookie和session是目前使用的两种存储机制。cookie是从一个WEB页到下一个WEB页面的数据传送方法,cookie存储在客户端;Session是让数据在页面中持续有效的一个传递方法,session存储在服务器端。掌握了cookie与session这两个技术,在WEB网站页面间信息传递的安全性是
JWT 认证方案学习
定义JWT (JSON WEB TOKEN) 是一种安全通讯标准,它定义了一种紧凑自包含的方式,用于在各方之间安全的传输 JSON 对象。常见应用场景是API之间的认证通讯。 一般的用户认证流程 1、请求方发送账户密码到服务器,验证账户可用性。 2、验证成功,生成 session,保存在服务端。 3、服务端返回一个 s
Cookie和Session
Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能。 Cookie的Domain和Path属性标识了这个Cookie是哪一个网站发送给浏览器的;Cookie的Expires属性标识了Cookie的有效时间,当Cookie的有效时间过了之后,这些数据就被自动删除了。 如 果不设置
Java Web学习总结(11)——Session使用示例教程
一、Session简单介绍 -------------   在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下)。因此,在需要保存用户数据时,服务器程序可以把用户数据写到用户浏览器独占的session中,当用户使用浏览器访问其它程序时,其它程序可以从用户的session中
Java认证:对session和cookie的一些理解
Java认证:对session和cookie的一些理解 博客分类: java 这篇文章虽然说的是JAVA中的session和cookie的使用,但是对于其他语言也是适用的。 #### 一、cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。同时我们也看
005 python接口 session
![](https://oscimg.oschina.net/oscnet/68f4adce5843bed6c8614e63961e5283ddf.jpg) /* 时间:2018/09/22 功能:session 目录:   一: session 1 概念 2
219. 单页应用 会话管理(session、cookie、jwt)
> 原文链接:[https://github.com/ly525/blog/issues/219](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fly525%2Fblog%2Fissues%2F219) 关键字:`http-only`, `cookie`,`se
219. 单页应用 会话管理(session、cookie、jwt)
> 原文链接:[https://github.com/ly525/blog/issues/219](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fly525%2Fblog%2Fissues%2F219) 关键字:`http-only`, `cookie`,`se
Django中cookie和session
cookie和session -------------- **Cookie`可以翻译为“小甜品,小饼干” ,Cookie 在网络系统中几乎无处不在,当我们浏览以前访问过的网站时,网页中可能会出现 :你好 .xx,`Cookie`其实是客户端记录用户行为的一个文件,形式通常是键值对的方式,大家可能有过这种经历,登录网站有的浏览器会提示,是否保存`Cooki
Django中的session的使用
一、Session 的概念 ============= * cookie 是在浏览器端保存键值对数据,而 session 是在服务器端保存键值对数据 * session 的使用依赖 cookie:在使用 Session 后,会在 Cookie 中存储一个 sessionid 的数据,每次请求时浏览器都会将这个数据发给服务器,服务器在接收到 sess
JSON WEB Tokens 和 WebSocket
#### JSON WEB Tokens > JSON Web Token (JWT) 是一种基于token 的认证方案。 在人们大规模地开始Web应用的时候,我们在授权的时候遇到了一些问题,而这些问题不是Cookie所能解决的。Cookie存在一些明显的问题:不能支持跨域、并且不是无状态的、不能使用CDN、与系统耦合等等。除了解决上面的问题,它还可以提
JWT的优点和实现Token认证的安全问题
JWT的优点和实现Token认证的安全问题 ===================== 一、什么是JWT -------- JWT——Json web token  是为了在网络应用环境间传递声明而执行的一种**基于****JSON****的开放标准**,可实现无状态、分布式的Web应用授权。 二、我们为什么需要JWT? -------------
Spring Boot + Redis 处理 Session 共享
![](https://oscimg.oschina.net/oscnet/1c33266b-c92f-4817-b73a-e60421658769.png) **背景** Web 开发中,通过 Session 在服务端记录用户状态是很常见的操作。对于 Web 开发中 Session、Cookie 等概念请参考《Session 机制详解》