vue的token儲存
vue的token儲存
在前後端完全分離的情況下，Vue專案中實現token驗證大致思路如下：
1、第一次登入的時候，前端調後端的登陸介面，傳送使用者名稱和密碼
2、後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回一個token
3、前端拿到token，將token儲存到localStorage和vuex中，並跳轉路由頁面
4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登入頁面，有則跳轉到對應路由頁面
5、每次調後端介面，都要在請求頭中加token
6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回資料，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401
7、如果前端拿到狀態碼為401，就清除token資訊並跳轉到登入頁面
強快取和協商快取
強快取
當瀏覽器去請求某個檔案的時候，服務端就在respone header裡面對該檔案做了快取配置。快取的時間、快取型別都由服務端控制,器，控制強制快取的欄位分別是Expires和Cache-Control，其中Cache-Control優先順序⽐Expires⾼。
-
第一個屬性: Expires表示有限期 在一定時間內訪問該介面 都會用本地的資料
-
強快取第二個屬性欄位 屬於1.1的標準 建議使用1.1
-
Cache-Control 服務端引數：
-
max-age: 在多少秒內有效，是一個相對時間，這樣比Expires具體的時間就更精確了。
-
s-maxage: 就是用於表示 cache 伺服器上（比如 cache CDN，快取代理伺服器）的快取的有效時間的，並只對 public 快取有效。
-
no-cache：不使用本地強快取。需要使用快取協商。
-
no-store：直接禁止瀏覽器快取資料，每次使用者請求該資源，都會向伺服器傳送一個請求，每次都會下載完整的資源。
-
public：可以被所有的使用者快取，包括終端使用者和中間代理伺服器。
-
private：只能被終端使用者的瀏覽器快取，不允許中間快取代理進行快取，預設的。
-
1. cache-control: max-age=xxxx，public
客戶端和代理伺服器都可以快取該資源；
客戶端在xxx秒的有效期內，如果有請求該資源的需求的話就直接讀取快取,statu code:200 ，如果使用者做了重新整理操作，就向伺服器發起http請求
2. cache-control: max-age=xxxx，private
只讓客戶端可以快取該資源；代理伺服器不快取
客戶端在xxx秒內直接讀取快取,statu code:200
3. cache-control: max-age=xxxx，immutable
客戶端在xxx秒的有效期內，如果有請求該資源的需求的話就直接讀取快取,statu code:200 ，即使使用者做了重新整理操作，也不向伺服器發起http請求
4. cache-control: no-cache
跳過設定強快取，但是不妨礙設定協商快取；一般如果你做了強快取，只有在強快取失效了才走協商快取的，設定了no-cache就不會走強快取了，每次請求都回詢問服務端。
5. cache-control: no-store
不快取，這個會讓客戶端、伺服器都不快取，也就沒有所謂的強快取、協商快取了。
協商快取 (前後端一起處理)
上面說到的強快取就是給資源設定個過期時間，客戶端每次請求資源時都會看是否過期；只有在過期才會去詢問伺服器。所以，強快取就是為了給客戶端自給自足用的。而當某天，客戶端請求該資源時發現其過期了，這是就會去請求伺服器了，而這時候去請求伺服器的這過程就可以設定協商快取。這時候，協商快取就是需要客戶端和伺服器兩端進行互動的。
首先設定Cache-Control：no-cache, 使客戶端不走強快取，再判斷客戶端請求是否有帶ifModifiedSince欄位，沒有就設定Last-Modified欄位，並返回資原始檔。如果有就用fs.stat讀取資原始檔的修改時間，並進行對比，如果時間一樣，則返回狀態碼304
前端程式碼定義一個時間
etag：是當伺服器響應請求時返回當前資檔案的一個唯一標識(由伺服器生成) 每個檔案有一個，改動檔案了就變了，就是個檔案hash，每個檔案唯一，就像用webpack打包的時候，每個資源都會有這個東西，如： app.js打包後變為 app.c20abbde.js，加個唯一hash，也是為了解決快取問題。
last-modified：檔案的修改時間，精確到秒
也就是說，每次請求返回來 response header 中的 etag和 last-modified，在下次請求時在 request header 就把這兩個帶上，服務端把你帶過來的標識進行對比，然後判斷資源是否更改了，如果更改就直接返回新的資源，和更新對應的response header的標識etag、last-modified。如果資源沒有變，那就不變etag、last-modified，這時候對客戶端來說，每次請求都是要進行協商快取了，即：
發請求-->看資源是否過期-->過期-->請求伺服器-->伺服器對比資源是否真的過期-->沒過期-->返回304狀態碼-->客戶端用快取的老資源
當服務端發現資源真的過期的時候，會走如下流程：
發請求-->看資源是否過期-->過期-->請求伺服器-->伺服器對比資源是否真的過期-->過期-->返回200狀態碼-->客戶端如第一次接收該資源一樣，記下它的cache-control中的max-age、etag、last-modified等。
協商快取步驟總結：
請求資源時，把使用者本地該資源的 etag 同時帶到服務端，服務端和最新資源做對比。
如果資源沒更改，返回304，瀏覽器讀取本地快取。
如果資源有更改，返回200，返回最新的資源
BFC
FBC：Block Formatting Context， 名為 "塊級格式化上下文"
W3C官方解釋為：BFC它決定了元素如何對其內容進行定位，以及與其它元素的關係和相互作用，當涉及到視覺化佈局時，Block Formatting Context提供了一個環境，HTML在這個環境中按照一定的規則進行佈局。
簡單來說就是，BFC是一個完全獨立的空間（佈局環境），讓空間裡的子元素不會影響到外面的佈局。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
BFC佈局規則：
- BFC就是一個塊級元素，塊級元素會在垂直方向一個接一個的排列
- BFC就是頁面中的一個隔離的獨立容器，容器裡的標籤不會影響到外部標籤（解決margin-top的穿透問題）
- 垂直方向的距離由margin決定， 屬於同一個BFC的兩個相鄰的標籤外邊距會發生重疊
- 計算BFC的高度時，浮動元素也參與計算（清浮動，解決頁面塌陷）
- BFC的區域不會和浮動的元素重疊（同級元素）=>可以利用這個特性設定左右兩欄佈局，左邊float右邊overflow:hidden;（形成BFC且只能用這個，其他的幾種如果不設定寬度只能靠內容撐開）就可以實現右邊區域自適應區域且不會和左邊重疊。
BFC也屬於普通流，設定為BFC的元素，相當於一種隔離了的元素，容器內部的元素不會在佈局上影響外面的元素。
如何形成BFC？
- HTML（文件流的內容怎麼排布）
- float屬性不為none（脫離文件流的元素怎麼排布）
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
map與forEach的區別
forEach 方法，是最基本的方法，就是遍歷與迴圈，預設有3個傳參：分別是遍歷的陣列
內容 item 、陣列索引 index 、和當前遍歷陣列 Array
map 方法，基本用法與 forEach 一致，但是不同的，它會返回一個新的陣列，所以在
callback需要有 return 值，如果沒有，會返回 undefined
快速的讓一個數組亂序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5; })
console.log(arr);
css sprite是什麼,有什麼優缺點
-
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
-
優點：
- 減少 HTTP 請求數，極大地提高頁面載入速度
- 增加圖片資訊重複度，提高壓縮比，減少圖片大小
- 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現
-
缺點：
- 圖片合併麻煩
- 維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式