單頁應用 - Token 驗證

第一次接觸單頁應用,記錄公司項目關於Token驗證知識.

Token的工做原理

Token工做原理

1. 登陸時候,客戶端經過用戶名與密碼請求登陸
2. 服務端收到請求區驗證用戶名與密碼
3. 驗證經過,服務端會簽發一個Token,再把這個Token發給客戶端.
4. 客戶端收到Token,存儲到本地,如Cookie,SessionStorage,LocalStorage.咱們是存在SessionStorage
5. 客戶端每次像服務器請求API接口時候,都要帶上Token.
6. 服務端收到請求,驗證Token,若是經過就返回數據,不然提示報錯信息.複製代碼

這裏還涉及到一些前端登陸攔截(路由攔截,攔截器).

• 路由攔截

// 登陸路由設置個字段,用來記錄是否已經登陸
path: '/login', name:'login',
    component: resolve => require(['./login.vue'], resolve),
    meta: { noCheckSession: true }複製代碼

// 路由攔截
router.beforeEach((to, from, next) => {
  if(to.matched.some(record => !record.meta.noCheckSession)) {
    let isLogin = auth.checkAuth() //咱們登陸成功後會設置個字段(authenticated)爲true.這裏就是獲取那個字段.
    if(!isLogin){
      console.error('Place login!')
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 跳轉到登陸頁面
      })
    }else{
      next()
    }
  }else{
    next()
  }
  }複製代碼

• 攔截器

export const interceptor = function(Vue){
  Vue.http.interceptors.push((request, next)=>{
    let tokenVal = sessionStorage.getItem("token"); // 取出Tolen
    if(tokenVal) {
      request.headers['token'] = tokenVal  // 存在的話,把Token放在請求頭中
    }

    next((response)=>{
      let status = response.status
      let data = response.data
      try{
        if(typeof data === 'string'){
          data = JSON.parse(data)
        }
      }catch(e){

      }
      let isError = false
      let duration = 0
      let options = {
        message: ""
      }
      if(status === 401 ) {
        location.href = '/login'  // 401未受權,從新登陸
      }else if (status === 500){
        isError = true
        options.message = response.statusText
        options.description = response.data
        Message.error(options) // 調用全局組件提示
          location.href = '/login'
      }else if (status === 200){
        // custom error
        if (response.data['<isError>']){
          ...
        }
        //timeout
        else if(data.data && data.data['ecode'] === "401"){
          ....
        }
      }
    });
  });
}複製代碼

auth0.com/blog/ten-th…關於Token,你須要知道的十件事.

• Token 應該被保存起來,放到 local / session stograge 或者 cookies.

  1. 在單頁應用程序中，有些用戶刷新瀏覽器後會帶來一些跟 token 相關的問題。而解決方法很簡單：你應該把 token 保存到起來：放到 session storage, local storage 或者是客戶端的 cookie 裏。而瀏覽器不支持 session storage 時都應該轉存到 Cookies 裏。
    2. 存放在Cookie裏面,只是把 Cookie 看成一個儲存機制，而不是一種驗證機制,這個 cookie 不會被 Web 框架用於用戶驗證，因此沒有 XSRF 攻擊的危險。複製代碼

• Tokens像 cookie 同樣有有效期，你能夠有更多的操做方法

// Cookie的有效期操做

1. cookies 能夠在瀏覽器關閉後刪除（session cookies）；
2. 經過絕對有效期或彈性有效期（sliding window expiration）；
3. Cookies 能夠經過攜帶有有效期地保存起來。複製代碼

//一旦 token 過時，只須要從新獲取一個。咱們通常定義個能夠接口去刷新 token


 1. 讓舊的 token 失效；
 2. 檢查這個用戶是否是還存在，權限是否被取消或者任何對你的程序來講是有必要的；
 3. 獲得一個更新了有效期的 token。複製代碼

• Local / session storage 不會跨域工做，請使用一個標記 cookie

  1. sessionStorage 不能跨頁面共享的，關閉窗口即被清除，
    2. localStorage 能夠同域共享，而且是持久化存儲的
    3. 在 local / session storage 的 tokens，就不能從不一樣的域名中讀取,甚至是子域名也不行.
    解決辦法使用Cookie.demo: 假設當用戶經過 app.yourdomain.com 上面的驗證時你生成一個 token 而且做爲一個 cookie 保存到 .yourdomain.com,而後，在 youromdain.com 中你能夠檢查這個 cookie 是否是已經存在了，而且若是存在的話就轉到 app.youromdain.com去。這個 token 將會對程序的子域名以及以後一般的流程都有效（直到這個 token 超過有效期）
    只是利用cookie的特性進行存儲而非驗證.複製代碼

• 每一個 CORS（跨域資源共享）請求都會帶上預請求（Preflight request）

• 當你須要流傳送某些東西，請用 token 去獲取一個已簽名的請求。

• XSS 比 XSRF 要更容易防範

XSS 攻擊的原理是，攻擊者插入一段可執行的 JavaScripts 腳本，該腳本會讀出用戶瀏覽器的 cookies 並將它傳輸給攻擊者，攻擊者獲得用戶的 Cookies 後，便可冒充用戶。
可是要防範 XSS 也很簡單，在寫入 cookies 時，將 HttpOnly 設置爲 true，客戶端 JavaScripts 就沒法讀取該 cookies 的值，就能夠有效防範 XSS 攻擊。
由於 Tokens 也是儲存在本地的 session storage 或者是客戶端的 cookies 中，也是會受到 XSS 攻擊。因此在使用 tokens 的時候，必需要考慮過時機制，否則攻擊者就能夠永久持有受害用戶賬號。複製代碼

• 注意 token 的大小

  1. Token 機制在每次請求 API 的時候，都須要帶上一個 Authorization 的 Http Header 。
    2. Token 的大小其實由你儲存在 token 中的信息量所決定，例如可能有 nickname，openid 等開發者另外加上的信息。
    3. Token 中只保留關鍵的幾條身份標識信息，其他都放到數據庫裏面了，權限控制的時候再撈出。這樣作的好處是，開發者能夠徹底掌控 token，由於關鍵信息都已是你代碼和數據庫中的一部分了，想怎麼弄均可以了
    4. # Token
        GET /foo
        Authorization: Bearer ...2kb token...複製代碼

• 有須要的話，要加密而且簽名 token
• 將 JSON Web Tokens 應用到 OAuth 2，關於OAuth驗證阮一峯大神博客有.
• Tokens 不是萬能的解決方法，得根據你的需求自行採用

ps : 有些地方仍是不懂,慢慢學.