混合開發的時候是怎么做的

前后端混合開發的時候，用戶登錄狀態的管理一般都是通過session來實現的，原理很簡單：用戶登錄后，服務端將登錄用戶信息存儲到服務器上的特定位置，并生成對應的session id存儲到瀏覽器的cookie中。需要校驗的時候先讀取cookie中的session id，找到服務器中對應的存儲內容，完成校驗。
很顯然，這個機制是建立在cookie基礎上的，cookie又依賴于瀏覽器，而且有域名限制。是不適合app、小程序、以及前后端時數據接口采用其他域名等情況的。

app、小程序、前后端分離的時候要怎么做

app、小程序、前后端分離時的數據接口一般采用token來做登錄信息校驗。原理是用戶登錄后，服務端生成對應用戶的一個token（一般都是一段無意義的唯一字符串）后返回，app、小程序、前端（以下統稱為前端）拿到token后保存，在需要校驗用戶登錄的接口請求中加入token（可以是get、post參數或者http header的形式），服務端拿到token后校驗真實性、有效性等信息后完成登錄校驗。一般為了防止盜用，還會設置一套簽名校驗的過程。
其實token和session的原理是差不多的，都是服務端將對應用戶的一個key（session的時候是session id，token的時候就是token）交給前端，前端通過token請求服務端，服務端再去反查用戶，獲取用戶登錄狀態。
現在一般微信、微博等接口都是采用的這種方式。但是這種方式也有弊端，主要是：

服務端必須保存token，以及有效期，校驗的時候必須要有數據讀取的過程；
校驗簽名的時候一般需要一個secret做為加密簽名的附加字符，前端必須也要同時保存這個secret，這樣顯然不適合代碼會暴露的網頁前端。
這時候，就輪到我們這次的主角JWT出場了。

什么是JWT

JWT NPM
JWT是JSON Web Token的簡稱，有官網詳細介紹，大家可以看一看，這里簡單說一下。
JWT其實就是一種特殊的token，原理和使用方法自然和token一樣。
JWT是由三部分組成的字符串，結構是：頭部+主體內容（官方稱之為Payload）+簽名，三部分用“.”連接。頭部和主體內容都是json格式的字符串再經過base64編碼，為了方便放在get請求中，還需要把類似“=”、“/”等特殊字符替換掉。

頭部內容是固定的，原始json就是下面這樣

{"alg": "HS256","typ": "JWT" }

主要是說明了最后簽名部分的加密算法。

重點是中間的主體內容，原始json一般是類似下面這樣的

{"user": "John Doe","exp": "2020-01-01 12:24:30" }

主體內容一個是當前登錄的用戶，可以是用戶id，也可以是用戶名等可以檢索定位到用戶的信息；還有一個就是過期時間。還可以加入一些其他不私密的信息。
服務端拿到JWT之后可以在不讀取數據的情況下，僅通過解碼這部分信息就可以完成獲取登錄用戶以及判斷是否過期等初期工作。

最后的簽名一般是把頭部、主體內容再加上secret拼接成字符串再加密，這一步在用戶登錄生成JWT的時候就完成了。服務端拿到JWT之后只需要把前兩部分加上secret再計算一次簽名加以比對就可以完成校驗簽名，前端不需要同時保存secret。

example

install

npm install jwt-decode

or

yarn add jwt-decode

Usage

import jwt_decode from "jwt-decode";var token = "eyJ0eXAiO.../// jwt token"; var decoded = jwt_decode(token);console.log(decoded);/* prints:* { foo: "bar",* exp: 1393286893,* iat: 1393268893 }*/// decode header by passing in options (useful for when you need `kid` to verify a JWT): var decodedHeader = jwt_decode(token, { header: true }); console.log(decodedHeader);/* prints:* { typ: "JWT",* alg: "HS256" }*/

Use as a CommonJS package

const jwt_decode = require('jwt-decode'); ...

Include with a script tag

Copy the file jwt-decode.js from the build/ folder to your project somewhere, then include like so:

<script src="jwt-decode.js"></script>

最后再說一下缺點

JWT在實際使用中也是存在問題的，目前想到以下幾點：

安全性：簽名包含在token中，一旦token整體被盜用，將沒有辦法區分，所以有網友稱之為“裸奔”；
過期時間放在token中而不是服務端保存處理，一旦token生成并簽發出去，將無法靈活的控制有效期；
最后一個是用戶體驗，其實可以算是token方式的通病。這個問題我也和群友討論過，大家在訪問社區的時候應該會遇到過，還在訪問過程中突然變成未登錄。我覺得這主要時因為服務端在token過期后就即時判斷為用戶登錄失敗，不管你在網頁上處于什么狀態。這個問題在session方式中是不存在的，前面說過session依賴于cookie，而存儲session id的cookie是會保存在整個瀏覽器進程，就是說只要瀏覽器不關閉，用戶就可以一直保持登錄狀態

總結

以上是生活随笔為你收集整理的数据接口的登录态校验以及JWT的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。