axios 攔截器（interceptors）和 登陸狀態的保存 cookie session token 三者的區別 和 路由導航衛士

http 的請求是無狀態的

cookie

1. 數據保存在客戶端。

2. 數據量小，不少小的站點對cookie的大小和數量都濟寧了限制。

3. 不安全，別人能夠分析存放到本地的cookie而且進行cookie詐騙，也可能被攔截。

session

1. 數據存放在服務器端。

2. 安全性叫高。（可是服務器出現故障也會形成數據丟失）

3. session 能夠依賴 cookie， 也能夠不依賴使用 URL。

4. 訪問量增多，佔用服務器資源，若是服務器故障，全部保存的信息也會丟失。

token

1. 在服務器中不存在用戶狀態，他是定義通用的算法。

2. 客戶端第一次登陸時候，服務器會生成一個 token ，返回 給客戶端。

3.  後續的全部請求都會帶着 token。

4. 服務器會根據算法啦效驗 token 的合法性。

5. 怎麼把token攜帶的數據給服務器

  5.1 咱們先使用 localStorage.setItem('數據名'，數據位置)，例如 localStorage.Item('mytoken', res.data.token),將token 保存到localStorge 中，在客戶端將要帶着 token 信息發送請求時，會被一個叫作 axios 的攔截器（interceptors）攔截，將數據處理以後再將請求發送給服務器。處理過程就是： 攔截器將 token 拿出來，放到一個 key 中，這個key 是先後臺約定好的一個 key， 而後這個key 會做爲一個請求頭放到即將發送給服務器的請求中，此時請求頭的值就是 token。之後的每一次請求，攔截器都會把token 攔截，做爲請求頭髮送過去。服務器拿到token 後就會進行效驗，效驗經過後就會返回數據。

6. axios 攔截器 的使用

詳見github 上的使用方法  https://github.com/axios/axios  攔截器一種能夠攔截請求 一種能夠攔截響應,這裏舉例攔截請求，github上的例子

1 axios.interceptors.request.use(function (config) {
2     // Do something before request is sent
3     return config;
4   }, function (error) {
5     // Do something with request error
6     return Promise.reject(error);
7   });

我本身的示例代碼：

 1 axios.interceptors.request.use(function(config) {
 2     // 請求成功後返回的內容
 3     let token = localStorage.getItem('mytoken') //攔截器獲取到token 存儲到變量token中
 4     if (token) {
 5         //config是一個請求參數,他是一個對象,Authorization 是先後臺約定好的那key,把獲取到的token賦值給他
 6         config.headers['Authorization'] = token
 7     }
 8     return config;
 9 }, function(error) { //請求失敗後返回的內容
10     return Promise.reject(error);
11 });

    攜帶

攜帶的token 能夠在 network 中查看。

7. 路由 全局守衛

在 vue 的 router 中叫作導航守衛，註冊一個全局守衛，他的做用就是在路由跳轉以前，對路由進行判斷，防止未登陸用戶跳轉到須要登陸的頁面上去

具體使用方法 能夠參考文檔      https://www.merriam-webster.com/dictionary/touter

示例代碼演示：

 1 // 註冊一個全局守衛（導航衛士）,其做用就是在路由跳轉以前，對路由進行判斷，防止未登陸的用戶跳轉到須要登陸的頁面
 2 router.beforeEach((to, from, next) => {
 3         let token = localStorage.getItem('mytoken') //獲取用戶登陸時生成的token
 4         if (token) {
 5             next(); //若是token存在，說明用戶已經登陸，調用next方法，不妨礙用戶繼續瀏覽
 6         } else {
 7             if (to.path !== '/login') { //若是用戶沒有登陸瀏覽別的頁面，則強制跳轉到登陸頁面
 8                 next({ path: '/login' })
 9             } else { //若是用戶瀏覽的就是登陸頁面，則調用next方法 ，不去幹涉，
10                 next()
11             }
12         }
13     })