共计 1736 个字符，预计需要花费 5 分钟才能阅读完成。
原文链接：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.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 页面，否则跳转到登录页面
备注：sessionid 该字段由用户在登录之后，由后端框架通过 response.setCookie 写入前端，因此该字段需要和后端同学确认
需要后端同学在 response header 中配置 cookie 中该字段的 http-only 属性，允许前端读取 cookie。否则前端通过 document.cookie 读取到的 cookie 将不包含 sessionid 字段
这个时候，可能会存在 js 读取 cookie 导致不安全的情况，后端同学可以把 cookie 中的某个字段设置为 允许读取，其他 cookie 设置不允许读取，这样即使被第三方不安全脚本获取，也无法产生负面影响。
如果用户已登录 && 在浏览器中输入了登录页地址，则将其重定向到首页
更多说明
这样做，前端就不必再向后端发起 API 做权限鉴定了（后端返回 401，前端跳转到 401），减少不必要的 API 请求，特别是如果在 API 响应时间过长的情况下，体验不太友好。
用户修改 cookie，伪造 sessionid
这样的话，前端就无能为力了，前端鉴权此时认为该用户合法。此时访问首页，将会调用获取数据的 API。
浏览器会将 用户伪造的 sessionid 带给后端，这时候就需要后端对 sessionid 进行较验了。比如校验前端带来的 sessionid 与数据库中的 sessionid 是否一致
用户伪造的数据 sessionid 和 后端数据库中 sessionid 的概率 非常非常低，可以忽略不计，因为 sessionid 的位数一般在 32 位以上，因为里面包含了字母和数字，也就由 32 ^ 36 种可能
结论：伪造没有意义，即使用户可以看到页面的样子，但是看不到数据
采用 localStorage 而不是 sessionStorage 的原因（SessionStorage 失效场景）
原因：sessionStorage 无法跨 Tab 共享
用户在新打开一个 Tab，输入已经登录之后的某个页面
通过 target=”_blank” 来打开新页面的时候，会导致会话失效
在当前页面执行 Duplicate（复制 Tab），sessionStorage 失效
