219. 單頁應用會話管理(session、cookie、jwt)

原文連接：https://github.com/ly525/blog/issues/219前端

關鍵字：http-only, cookie,sessionid, vue-router, react-router, 安全，localStorage, jwtvue

需求描述

內部管理平臺，須要用戶登陸以後才能訪問。如今將該平臺地址（www.xxx.com/home）直接發給新來的運營同窗
前端須要檢測該用戶是否已登陸，若是未登陸，則將其 redirect 到登陸頁面
由於該頁面爲單頁應用，路由跳轉不涉及後端的 302 跳轉，使用前端路由跳轉

實現思路

實現代碼react

// 以 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. 該頁面是否須要權限才能訪問：登陸、註冊頁面不須要權限
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 設置不容許讀取，這樣即便被第三方不安全腳本獲取，也沒法產生負面影響。
若是用戶已登陸 && 在瀏覽器中輸入了登陸頁地址，則將其重定向到首頁

219. 單頁應用 會話管理(session、cookie、jwt)

需求描述

實現思路

更多說明

219. 單頁應用會話管理(session、cookie、jwt)