JWT實(shí)現(xiàn)跨域請(qǐng)求

文章目錄

• JWT實(shí)現(xiàn)跨域請(qǐng)求
• • cookie的弊端
  • 使用JWT實(shí)現(xiàn)跨域
  • 案例

cookie的弊端

最近在做一個(gè)web項(xiàng)目，我想實(shí)現(xiàn)一個(gè)功能：客戶端瀏覽器每次訪問首頁(yè)的時(shí)候，就從請(qǐng)求中獲取cookie，如果cookie中含有用戶信息，就自動(dòng)為用戶登錄，否則就不登陸。
但是我的前端是基于vue實(shí)現(xiàn)的，起在8080端口，服務(wù)端起在9090端口，眾所周知cookie是不可以跨域的，滿足不同協(xié)議，不同域名，不同端口即為跨域，雖然前后端都部署在localhost，但是不同端口造成了跨域。

雖然我們可以采取cors策略等辦法實(shí)現(xiàn)跨域，但是相對(duì)來說增添了麻煩。

使用JWT實(shí)現(xiàn)跨域

我采取了網(wǎng)上的很多辦法，依然不能讓cookie實(shí)現(xiàn)跨域，于是就想到了使用JWT+localStorage的辦法。其實(shí)JWT是可以放在cookie里面的，但是在本文的場(chǎng)景中cookie不能跨域。

大致思路是這樣的：

用戶登錄成功以后，服務(wù)端把用戶的手機(jī)號(hào)碼生成一個(gè)Token令牌，然后返回給客戶端瀏覽器。

客戶端瀏覽器在收到服務(wù)端的response以后，把Token令牌儲(chǔ)存到localStorage中，但是localStorage默認(rèn)是沒有過期時(shí)間的，也就是永久保存，所以我們還需要做一層封裝，維護(hù)一個(gè)過期時(shí)間。

下一次用戶訪問首頁(yè)的時(shí)候，如果儲(chǔ)存的token沒有過期，就把token令牌儲(chǔ)存在request中。

服務(wù)端獲取到request中的token令牌，如果正確，就自動(dòng)為用戶登錄

案例

在這里我做了一個(gè)簡(jiǎn)單的小demo來演示大致的流程，用了gin、vue以及一個(gè)go的jwt庫(kù)：Gin中使用JWT。

客戶端

首先在前端創(chuàng)建一個(gè)storage.js文件來對(duì)localStorage做一次封裝：

<template><div class="form"><input type="text" v-model="phoneNumber"><input type="submit" value="提交" @click="submit"><br><br><input type="submit" value="第二次提交" @click="submit2"></div> </template><script> import storage from '../../assets/storage' export default {data() {return {phoneNumber: null,}},methods: {submit() {var forms = new FormData();forms.append("phoneNumber", this.phoneNumber);this.$axios.post("http://127.0.0.1:9092/token", forms).then((res) => {storage.set("access_token", res.data.token)console.log("后端發(fā)送來的token儲(chǔ)存到本地：");console.log(res.data.token);})},submit2() {var forms = new FormData();forms.append("Authorization", 'Bearer ' + storage.get("access_token"))console.log("從瀏覽器緩存取出token發(fā)送：" + forms.get("Authorization"));this.$axios.post("http://127.0.0.1:9092/token2", forms).then((res) => {console.log("打印后端的數(shù)據(jù)：");console.log(res.data.message);})},} } </script>

服務(wù)端

首先創(chuàng)建一個(gè)jwt的model在token.go文件中，我們?cè)诶锩娑x了jwt結(jié)構(gòu)體、生成token令牌的方法以及解析token令牌的方法：

package modelsimport ("errors""github.com/dgrijalva/jwt-go""time" )// MyClaims 自定義結(jié)構(gòu)體 type MyClaims struct {PhoneNumber string `json:"phoneNumber"`jwt.StandardClaims }const TokenExpireDuration = time.Hour * 720 // 自定義密鑰 var mySecret = []byte("123456")// GenToken 生成jwt func GenToken(phoneNumber string) (string, error) {c := MyClaims{phoneNumber,jwt.StandardClaims {ExpiresAt: time.Now().Add(TokenExpireDuration).Unix(), // 過期時(shí)間Issuer: "goShop", // 簽發(fā)人},}// 使用HS256加密方式token := jwt.NewWithClaims(jwt.SigningMethodHS256, c)tmp, err := token.SignedString(mySecret)return tmp, err }// ParseToken 解析token func ParseToken(tokenString string) (*MyClaims, error) {token, err := jwt.ParseWithClaims(tokenString, &MyClaims{}, func(token *jwt.Token) (interface{}, error) {return mySecret, nil})if err != nil {return nil, err}if Claims, ok := token.Claims.(*MyClaims); ok && token.Valid {return Claims, nil}return nil, errors.New("invalid token") }

最后我們?cè)谌肟诤瘮?shù)中定義接受客戶端兩次請(qǐng)求的路由：

package testsimport ("fmt""github.com/gin-gonic/gin""go-shop/middleware""go-shop/models""net/http""testing" )func authHandler(c *gin.Context) {phoneNumber := c.PostForm("phoneNumber")// 生成tokentokenString, _ := models.GenToken(phoneNumber)fmt.Println("生成token：", tokenString)c.JSON(http.StatusOK, gin.H{"msg" : "success","token" : tokenString,}) } func authHandler2(c *gin.Context) {fmt.Println("token認(rèn)證成功！")c.JSON(http.StatusOK, gin.H{"message" : "success",}) }func TestJWT(t *testing.T) {r := gin.Default()r.Use(middleware.Cors())r.POST("/token", authHandler)r.POST("/token2", middleware.JWTAuthMiddleware(),authHandler2)r.Run(":9092") }

在表單中輸入我的手機(jī)號(hào)碼，然后點(diǎn)擊提交，服務(wù)端會(huì)生成一段token令牌發(fā)送回來：
然后點(diǎn)擊第二次提交按鈕，客戶端會(huì)把令牌從localStorage中提取出來，加在request中發(fā)送給服務(wù)端，服務(wù)端驗(yàn)證成功以后，發(fā)送反饋消息：

參考資料：

vue-localStorage 緩存過期時(shí)間

vue保存后端發(fā)來的token+vue向后端發(fā)送網(wǎng)絡(luò)請(qǐng)求攜帶token

總結(jié)

以上是生活随笔為你收集整理的JWT实现跨域请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。