nemunemu 2019-07-01
关键字:http-only
, cookie
,sessionid
, vue-router
, react-router
, 安全
,localStorage
, jwt
实现代码
// 以 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(); } });
应该在进入任何页面之前,判断:
用户是否已经登录:本地 cookie (或者 localStorage)包含 session 相关信息
Cookie: csrftoken=YaHb...; sessionid=v40ld3x....
如果 A页面需要权限
且 本地 cookie中包含了 sessionid 字段
,则允许访问A页面,否则跳转到登录页面
response.setCookie
写入前端 ,因此该字段需要和后端同学确认用户已登录
&& 在浏览器中输入了登录页
地址,则将其重定向到首页
用户修改 cookie,伪造 sessionid
用户伪造的 sessionid
带给后端,这时候就需要后端对 sessionid 进行较验了。比如校验前端带来的 sessionid 与数据库中的 sessionid 是否一致采用 localStorage 而不是 sessionStorage 的原因(SessionStorage 失效场景)
原因:sessionStorage 无法跨 Tab 共享target="_blank"
来打开新页面的时候,会导致会话失效Duplicate
(复制 Tab),sessionStorage 失效