快捷導(dǎo)航

ThinkPHP5.1表單令牌Token失效問題的解決

更新時(shí)間：2019年03月22日 10:59:27 作者：YEYU2001

這篇文章主要給大家介紹了關(guān)于ThinkPHP5.1表單令牌Token失效問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ThinkPHP具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

ThinkPHP出于安全的考慮增加了表單令牌Token，由于通過Ajax異步更新數(shù)據(jù)僅僅部分頁面刷新數(shù)據(jù)，就導(dǎo)致了令牌Token不能得到更新，緊接著的第二次新建或更新數(shù)據(jù)（提交表單時(shí)）失敗——不能通過令牌的驗(yàn)證。

當(dāng)然了，最簡單的辦法就是刷新整個(gè)頁面，就導(dǎo)致了異步刷新的無意義！在網(wǎng)上搜尋了很多，有好幾種方法；看完覺得有一個(gè)最好：

Ajax異步動(dòng)態(tài)請(qǐng)求創(chuàng)建新令牌并更新到本地
主要思路：在每次發(fā)送表單結(jié)束后（不管成功與否）通過Ajax異步請(qǐng)求一個(gè)新的表單令牌并保存到表單隱藏域中，下次提交表單就使用新的表單令牌去通過。

最終的效果如下：

V2.5.0.png

主要分成三步：

第一步：在Index控制器下創(chuàng)建生成Token的方法

之所以選擇在Index控制器下創(chuàng)建，主要考慮在整個(gè)admin（后臺(tái)）可以方便的引用該方法，不需要每次都根據(jù)控制器找尋相應(yīng)的方法。也就是說，該方法其他控制器都可以引用！

<?php
namespace app\admin\controller;
use think\Controller;

class Index extends Valid {
 // 生成token函數(shù)
 public function getToken() {
  $request = \think\facade\Request::instance();
  echo $request->token();
 }
}

第二步：在Javascript中創(chuàng)建Ajax獲取新令牌

由于后臺(tái)生成新令牌的地址已經(jīng)固定了，也就是：
/admin/Index/，因此通過jQuery的Get方法容易獲取該令牌！

// 獲取新Token并更新
function getNewToken() {
 $.get("/admin/Index/getToken", function(data) {
  document.getElementById("__token__").value = data;
 });
}

第三步：在Html頁面中創(chuàng)建隱藏域保存令牌

其實(shí)在ThinkPHP的表單示例代碼中已經(jīng)有了該代碼。頁面第一次加載時(shí)的令牌Token是隨著頁面分配的，后面的令牌就是通過Ajax獲取的！

<!-- 隱藏區(qū)域 -->
<input type="hidden" id="__token__" name="__token__" value="{$Request.token}" />

最后，我們就可以在javascript的相應(yīng)提交表單的地方增加語句申請(qǐng)新令牌了！舉例，下面的示例代碼在提交后不管成功與否都申請(qǐng)了新的令牌。

/**
 * Ajax動(dòng)態(tài)更新數(shù)據(jù)并異步刷新頁面
 * @Author DuDongHua
 * @DateTime 2018-04-28T21:21:23+0800
 * @param {對(duì)象} Button  表單按鈕對(duì)象
 * @param {文本} Modal  模塊
 * @param {文本} Controller 控制器
 * @param {文本} Action  方法
 * @param {文本} Location Ajax加載頁面的位置id
 * 使用方法：表單對(duì)象不用提交的任何設(shè)置，提交假按鈕<a>設(shè)置onclick即可
 * 注意：
 *  1. 在javascript中拼接Thinkphp5的URL地址，不需要"{:url('" + Modal + "/" + Controller + "/" + Page + "')}方法
 *   只需要直接拼接地址即可，如：var MeURL = '/'+Modal+'/'+Controller+'/'+Page;
 */
function EditData(Button,Modal,Controller,Action,Location,Page){
 // 設(shè)置默認(rèn)參數(shù)
 var Modal  = arguments[1] ? arguments[1] : "admin";  // 模塊名
 var Controller = arguments[2] ? arguments[2] : "index";  // 控制器
 var Action  = arguments[3] ? arguments[3] : "editData"; // 方法名
 var Location = arguments[4] ? arguments[4] : "content"; // Ajax加載頁面的位置id
 var Page  = arguments[5] ? arguments[5] : "index";  // Ajax加載頁面控制器中的方法
 // 生成本頁面的url用于更新后異步刷新
 var MeURL = '/'+Modal+'/'+Controller+'/'+Page;
 setLoaderIn(true); //打開加載圖標(biāo)
 // 異步請(qǐng)求數(shù)據(jù)
 $.ajax({
  url: '/'+Modal+'/'+Controller+'/'+Action,
  type: 'POST',
  data: $(Button).closest("form").serialize(), //表單序列化
  dataType: 'json',
  success: function(data){
   // 更新頁面并提示
   // window.location.reload(); //當(dāng)加載整個(gè)頁面時(shí)有效但ajax更新時(shí)加載到主頁
   loadAjaxHTML(MeURL,Location);
   showMsg(data.msg);
   setLoaderIn(false); //關(guān)閉加載圖標(biāo)
   getNewToken();  // 獲取新Token
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
   showMsg(XMLHttpRequest.status+" "+XMLHttpRequest.readyState,textStatus,"red","#f60");
   getNewToken(); // 獲取新Token
  }
 });
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: