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

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

关键字： 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页面，否则跳转到登录页面

   response.setCookie
   

3. 如果 用户已登录 && 在浏览器中输入了 登录页 地址，则将其重定向到 首页

更多说明

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

2. 用户修改 cookie，伪造 sessionid

   用户伪造的 sessionid
   

3. 采用 localStorage 而不是 sessionStorage 的原因（SessionStorage 失效场景）

   原因：sessionStorage 无法跨 Tab 共享

   target="_blank"
   Duplicate