成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前后端分離之JWT（JSON Web Token）的使用

caohaoyu / 3523人閱讀

摘要：前言由于自己開(kāi)發(fā)的項(xiàng)目中用到了技術(shù)，前端采用了框架，后端采用了框架，故作此文幫助使用相同技術(shù)棧的朋友們。具體思路如下把后端生成的存入，然后前端切換路由刷新頁(yè)面的時(shí)候，通過(guò)請(qǐng)求的時(shí)候帶上這個(gè)，提交給后端判斷當(dāng)前的是否有效，后端返回結(jié)果。

前言

由于自己開(kāi)發(fā)的項(xiàng)目中用到了 JWT 技術(shù)，前端采用了 Vue.js 框架，后端采用了 CodeIgniter 框架，故作此文幫助使用相同技術(shù)棧的朋友們。

具體思路如下：
把后端生成的 JWT token 存入 localStorage，然后前端切換路由（刷新頁(yè)面）的時(shí)候，通過(guò) Ajax 請(qǐng)求的時(shí)候帶上這個(gè) token，提交給后端判斷當(dāng)前的 token 是否有效，后端返回結(jié)果。

JWT 用處很多，可以用于后臺(tái)權(quán)限的限制、接口安全性校驗(yàn)。

使用教程 前端 Vue.js vue-router

登錄時(shí)，將后端返回的 token 存入 localStorage

使用 Vue-Router 判斷是否存在 token，不存在跳轉(zhuǎn)至登錄

// JWT 用戶權(quán)限校驗(yàn)，判斷 TOKEN 是否在 localStorage 當(dāng)中
router.beforeEach(({name}, from, next) => {
  // 獲取 JWT Token
  if (localStorage.getItem("JWT_TOKEN")) {
    // 如果用戶在login頁(yè)面
    if (name === "login") {
      next("/");
    } else {
      next();
    }
  } else {
    if (name === "login") {
      next();
    } else {
      next({name: "login"});
    }
  }
});
axios

axios 全局配置攔截器
每次向后端請(qǐng)求攜帶 頭信息

在 src/main.js 當(dāng)中加上以下代碼：

// http request 攔截器
axios.interceptors.request.use(
  config => {
    if (localStorage.JWT_TOKEN) {  // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
      config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 攔截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      console.log("axios:" + error.response.status);
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁(yè)面
          store.commit("LOG_OUT");
          router.replace({
            path: "login",
            query: {redirect: router.currentRoute.fullPath}
          });
      }
    }
    return Promise.reject(error.response.data);   // 返回接口返回的錯(cuò)誤信息
  });

Vue.prototype.$http = axios;
后端 CodeIgniter

后端 Controller 接收請(qǐng)求頭信息，驗(yàn)證 token 有效性，無(wú)效返回 401 狀態(tài)碼

    $header = $this->input->get_request_header("Authorization", TRUE); // 獲取請(qǐng)求頭 Authorization
    list($token) = sscanf($header, "token %s"); // 提取 token
    if ($header != "" && jwt_helper::validate($token)) {
        $userid = jwt_helper::decode($header)->userId; // 解碼token 提取 userId 字段
        // do something
    } else {
        show_error("Permission denied", 401, "Please check your token."); // 401錯(cuò)誤
    }
這里提供了自己使用的封裝好的 JWT Helper 類(lèi) 和 JWT 的庫(kù) 使用方法和文件可以訪問(wèn) Github
倉(cāng)庫(kù)：https://github.com/52admln/JW...
安全性

可參考文章：http://www.cnblogs.com/xiekel... 當(dāng)中的基于JWT的Token認(rèn)證的安全問(wèn)題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/31972.html

相關(guān)文章

  • 前后端分離應(yīng)用——用戶信息傳遞

    摘要：前言記錄前后端分離的系統(tǒng)應(yīng)用下應(yīng)用場(chǎng)景用戶信息傳遞需求緣起照例先看看系統(tǒng)的一張經(jīng)典架構(gòu)圖，這張圖參考自網(wǎng)絡(luò)在自定義異常，你是怎么處理的中已經(jīng)對(duì)該架構(gòu)做了簡(jiǎn)單說(shuō)明，這里不再描述。 showImg(https://segmentfault.com/img/remote/1460000017839927?w=1024&h=768); 前言 記錄前后端分離的系統(tǒng)應(yīng)用下應(yīng)用場(chǎng)景————用戶信息傳...

    PAMPANG 評(píng)論0 收藏0

  • jwt前后端整合方案

    摘要：到這里，基于的前后端分離實(shí)現(xiàn)方案就搞定啦四關(guān)于的一些思考實(shí)際上，在使用的過(guò)程中有一個(gè)比較致命的缺點(diǎn)，就是一旦簽發(fā)了，在到期之前就會(huì)始終有效，除非服務(wù)器部署額外的邏輯。結(jié)語(yǔ)以上是關(guān)于基于的前后端分離實(shí)現(xiàn)方案的總結(jié)和思考。 一、jwt是什么 JWT全稱， JSON Web Token，是一個(gè)以JSON為基準(zhǔn)的標(biāo)準(zhǔn)規(guī)范。 舉例：服務(wù)器認(rèn)證以后，生成一個(gè) JSON 對(duì)象，發(fā)回給用戶，就像下...

    nevermind 評(píng)論0 收藏0

  • api權(quán)限管理系統(tǒng)與前后端分離實(shí)踐

    摘要：自己在前后端分離上的實(shí)踐要想實(shí)現(xiàn)完整的前后端分離，安全這塊是繞不開(kāi)的，這個(gè)系統(tǒng)主要功能就是動(dòng)態(tài)管理，這次實(shí)踐包含兩個(gè)模塊基于搭建的權(quán)限管理系統(tǒng)后臺(tái)編寫(xiě)的前端管理。 自己在前后端分離上的實(shí)踐 要想實(shí)現(xiàn)完整的前后端分離，安全這塊是繞不開(kāi)的，這個(gè)系統(tǒng)主要功能就是動(dòng)態(tài)restful api管理，這次實(shí)踐包含兩個(gè)模塊,基于springBoot + shiro搭建的權(quán)限管理系統(tǒng)后臺(tái)bootshir...

    bawn 評(píng)論0 收藏0

  • api權(quán)限管理系統(tǒng)與前后端分離實(shí)踐

    摘要：自己在前后端分離上的實(shí)踐要想實(shí)現(xiàn)完整的前后端分離，安全這塊是繞不開(kāi)的，這個(gè)系統(tǒng)主要功能就是動(dòng)態(tài)管理，這次實(shí)踐包含兩個(gè)模塊基于搭建的權(quán)限管理系統(tǒng)后臺(tái)編寫(xiě)的前端管理。 自己在前后端分離上的實(shí)踐 要想實(shí)現(xiàn)完整的前后端分離，安全這塊是繞不開(kāi)的，這個(gè)系統(tǒng)主要功能就是動(dòng)態(tài)restful api管理，這次實(shí)踐包含兩個(gè)模塊,基于springBoot + shiro搭建的權(quán)限管理系統(tǒng)后臺(tái)bootshir...

    tianlai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<