国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

songEagle開發系列:Vue + Vuex + Koa 中使用JWT認證

suosuopuo / 711人閱讀

摘要:一前言,是為了在網絡環境間傳遞聲明而執行的一種基于的開放標準。用戶簽發添加中間件校驗判斷是否可用獲取解密,獲取用戶名和認證失敗中添加處理此處在開發時需要過濾掉登錄接口,否則會導致驗證永遠失敗。前端處理前端開發使用的是,發送請求使用的是。

一、前言
JWT(JSON Web Token),是為了在網絡環境間傳遞聲明而執行的一種基于JSON的開放標準(RFC 7519)。

JWT不是一個新鮮的東西,網上相關的介紹已經非常多了。不是很了解的可以在網上搜索一下相關信息。
同步到sau交流學習社區:https://www.mwcxs.top/page/45...

二、源碼

Talk is cheap. Show me the code.

三、工作流程

JWT本質來說是一個token。在前后端進行HTTP連接時來進行相應的驗證。

博客的后臺管理系統發起登錄請求,后端服務器校驗成功之后,生成JWT認證信息;

前端接收到JWT后進行存儲;

前端在之后每次接口調用發起HTTP請求時,會將JWT放到HTTP的headers參數里的authorization中一起發送給后端;

后端接收到請求時會根據JWT中的信息來校驗當前發起HTTP請求的用戶是否是具有訪問權限的,有訪問權限時則交給服務器繼續處理,沒有時則直接返回401錯誤。

四、實現過程 1. 登錄成功生成JWT

說明:以下代碼只保留了核心代碼,詳細代碼可在對應文件中查看,下同。

// /server/api/admin/admin.controller.js
const jwt = require("jsonwebtoken");
const config = require("../../config/config");

exports.login = async(ctx) => {
  // ...
  if (hashedPassword === hashPassword) {
    // ...
    // 用戶token
    const userToken = {
      name: userName,
      id: results[0].id
    };
    // 簽發token
    const token = jwt.sign(userToken, config.tokenSecret, { expiresIn: "2h" });
    // ...
  }
  // ...
}
2. 添加中間件校驗JWT
// /server/middlreware/tokenError.js
const jwt = require("jsonwebtoken");
const config = require("../config/config");
const util = require("util");
const verify = util.promisify(jwt.verify);

/**
 * 判斷token是否可用
 */
module.exports = function () {
  return async function (ctx, next) {
    try {
      // 獲取jwt
      const token = ctx.header.authorization; 
      if (token) {
        try {
          // 解密payload,獲取用戶名和ID
          let payload = await verify(token.split(" ")[1], config.tokenSecret);
          ctx.user = {
            name: payload.name,
            id: payload.id
          };
        } catch (err) {
          console.log("token verify fail: ", err)
        }
      }
      await next();
    } catch (err) {
      if (err.status === 401) {
        ctx.status = 401;
        ctx.body = {
          success: 0,
          message: "認證失敗"
        };
      } else {
        err.status = 404;
        ctx.body = {
          success: 0,
          message: "404"
        };
      }
    }
  }
}
3. Koa.js中添加JWT處理

此處在開發時需要過濾掉登錄接口(login),否則會導致JWT驗證永遠失敗。

// /server/config/koa.js
const jwt = require("koa-jwt");
const tokenError = require("../middlreware/tokenError");
// ...

const app = new Koa();

app.use(tokenError());
app.use(bodyParser());
app.use(koaJson());
app.use(resource(path.join(config.root, config.appPath)));

app.use(jwt({
  secret: config.tokenSecret
}).unless({
  path: [/^/backapi/admin/login/, /^/blogapi//]
}));

module.exports = app;
4.前端處理

前端開發使用的是Vue.js,發送HTTP請求使用的是axios。
(1) 登錄成功之后將JWT存儲到localStorage中(可根據個人需要存儲,我個人是比較喜歡存儲到localStorage中)。

 methods: {
       login: async function () {
         // ...
         let res = await api.login(this.userName, this.password);
         if (res.success === 1) {
           this.errMsg = "";
           localStorage.setItem("SONG_EAGLE_TOKEN", res.token);
           this.$router.push({ path: "/postlist" });
         } else {
           this.errMsg = res.message;
         }
       }
     }

(2) Vue.js的router(路由)跳轉前校驗JWT是否存在,不存在則跳轉到登錄頁面。

 // /src/router/index.js
   router.beforeEach((to, from, next) => {
     if (to.meta.requireAuth) {
       const token = localStorage.getItem("SONG_EAGLE_TOKEN");
       if (token && token !== "null") {
         next();
       } else {
         next("/login");
       }
     } else {
       next();
     }
   });

(3) axios攔截器中給HTTP統一添加Authorization信息

 // /src/api/config.js
   axios.interceptors.request.use(
     config => {
       const token = localStorage.getItem("SONG_EAGLE_TOKEN");
       if (token) {
         // Bearer是JWT的認證頭部信息
         config.headers.common["Authorization"] = "Bearer " + token;
       }
       return config;
     },
     error => {
       return Promise.reject(error);
     }
   );

(4)axios攔截器在接收到HTTP返回時統一處理返回狀態

  // /src/main.js
   axios.interceptors.response.use(
     response => {
       return response;
     },
     error => {
       if (error.response.status === 401) {
         Vue.prototype.$msgBox.showMsgBox({
           title: "錯誤提示",
           content: "您的登錄信息已失效,請重新登錄",
           isShowCancelBtn: false
         }).then((val) => {
           router.push("/login");
         }).catch(() => {
           console.log("cancel");
         });
       } else {
         Vue.prototype.$message.showMessage({
           type: "error",
           content: "系統出現錯誤"
         });
       }
       return Promise.reject(error);
     }
   );

五、總結

這個基本上就是JWT的流程。當然單純的JWT并不是說絕對安全的,不過對于一個個人博客系統的認證來說還是足夠的。

最后打個小廣告。目前正在開發新版的個人博客中,包括兩部分:

【前端】(https://github.com/saucxs/son...

【后端】(https://github.com/saucxs/son...

都已在GitHub上開源,目前在逐步完善功能中。歡迎感興趣的同學fork和star。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99358.html

相關文章

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0
  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發表評論

0條評論

suosuopuo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<