token相關

　　* 自用筆記：token相關 *

token相關

1.token的工作原理
1> 登錄時候,客戶端通過用戶名與密碼請求登錄
2> 服務端收到請求區驗證用戶名與密碼
3> 驗證通過,服務端會簽發一個Token,再把這個Token發給客戶端.
4> 客戶端收到Token,存儲到本地,如Cookie,SessionStorage,LocalStorage.
5> 客戶端每次像服務器請求API接口時候,都要帶上Token.
6> 服務端收到請求,驗證Token,如果通過就返回數據,否則提示報錯信息.
2.token值得注意的事
1> token 過期時間爲 30 分鐘
2> Token 應該被保存起來（放到 local / session stograge 或者 cookies）
在單頁應用程序中，有些用戶刷新瀏覽器後會帶來一些跟 token 相關的問題。而解決方法很簡單：你應該把 token 保存到起來：放到 session storage, local storage 或者是客戶端的 cookie 裏。而瀏覽器不支持 session storage 時都應該轉存到 cookies 裏。在這種情況下要把 cookie 當作一個儲存機制，而不是一種驗證機制。
3> 登錄時有關token的操作
3.1> ajax請求login接口的時候，接口會返回token和refreshToken信息，存儲到localStorage中

// ajax回調函數中：
// data 爲ajax請求回來的數據
let token = {
  token: data.token,
  refreshToken: data.refreshToken,
};
 window.localStorage.setItem('admintoken', JSON.stringify(token));
// JSON的一個常見用途是將數據與Web服務器進行交換。將數據發送到Web服務器時，數據必須是字符串。使用JSON.stringify（）將JavaScript對象轉換爲字符串。
 utils.setCookie('haslogin','1');
 //登錄成功 記錄haslogin爲1；用來router.js設置未登錄或者登錄未成功設置路由跳轉到登錄頁
 utils.setCookie('Token', token.token);

3.2> 封裝setCookie()
此處有個時間轉化的問題（待解決）
Date的方法：
例如當前時間爲：2017/8/7 上午11:50:24
toGMTString()：此日期會在轉換爲字符串之前由本地時區轉換爲 GMT 時區 Mon, 07 Aug 2017 03:50:24 GMT（實際已經被toUTCString轉化），
注意：不贊成使用此方法。在使用toGMTString時，最後會被toUTCString() 取而代之
toUTCString()：會將日期用世界時表示，Mon, 07 Aug 2017 03:50:24 GMT
toLocaleString()：根據本地時間格式，把 Date 對象轉換爲字符串，轉化爲當前時間2017/8/7 上午11:50:24

// expires 爲token設置的過期時間
setCookie: function (key, value, expires) {
    var cValue = key + "=" + value;
    if (expires) {
      cValue += ";expires=" + expires;
    } else {
      let exp = new Date()
      exp.setTime(exp.getTime() + 55 * 60 * 1000);
// Date對象的getTime()方法可返回距 1970 年 1 月 1 日之間的毫秒數
// exp.getTime() + 55 * 60 * 1000 是爲了設置一個token的過期時間
      cValue += ";expires=" + exp.toLocaleString();
    }
    document.cookie = cValue;
  },

3.3> 在設置路由的時候，判斷是否登錄了，未登錄或者登錄未成功跳轉登錄頁

route.beforeEach((to, from, next)=>{
let loginInfo = utils.getCookie('haslogin');
    if(!loginInfo  &&  to.path !== '/login'){
        return next({
            name: 'login',
            // query: {redirect: to.fullPath}
        })
    }
    next()
})

3.前端攔截token

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

// 路由攔截(router.js)
route.beforeEach((to, from, next)=>{
    let loginInfo = utils.getCookie('haslogin');
    // 在登錄成功的時候 接口返回token相關信息 將信息記錄在cookie中
    if(!loginInfo && to.path !== '/login'){
        return next({
            name: 'login',
            // query: {redirect: to.fullPath} // 跳轉到登錄頁面
        })
    }
    next()
})

token cookie session 區別

Local / session storage 不會跨域工作，請使用一個標記 cookie
保存在 local / session storage 的 tokens，就不能從不同的域名中讀取（甚至是子域名也不行）
// Cookie的有效期操作

1. cookies 可以在瀏覽器關閉後刪除（session cookies）；
2. 通過絕對有效期或彈性有效期（sliding window expiration）；
3. Cookies 可以通過攜帶有有效期地保存起來。