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

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

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

需求描述

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

实现思路

实现代码

// 以 vue-router 为例
// 登录中间验证，页面需要登录而没有登录的情况直接跳转登录
router.beforeEach((to, from, next) => {const hasToken = document.cookie.includes('sessionid');// 如果采用 jwt，则同样 hasToken = localStorage.jwtconst 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. 该页面是否需要权限才能访问：登录、注册页面不需要权限
2. 用户是否已经登录：本地 cookie （或者 localStorage）包含 session 相关信息
```
 Cookie: csrftoken=YaHb...; sessionid=v40ld3x....
```
如果 A页面需要权限 且 本地 cookie中包含了 sessionid 字段，则允许访问A页面，否则跳转到登录页面
1. 备注：sessionid 该字段由用户在登录之后，由后端框架通过 response.setCookie 写入前端，因此该字段需要和后端同学确认
2. 需要后端同学在 response header 中配置cookie中该字段的 http-only属性，允许前端读取 cookie。否则前端通过 document.cookie 读取到的 cookie 将不包含 sessionid 字段
3. 这个时候，可能会存在 js 读取cookie 导致不安全的情况，后端同学可以把 cookie 中的某个字段设置为允许读取，其他 cookie 设置不允许读取，这样即使被第三方不安全脚本获取，也无法产生负面影响。
如果用户已登录 && 在浏览器中输入了登录页地址，则将其重定向到首页