ThinkpHP 5.1 폼 토 큰 실효 문제 해결

머리말
ThinkpHP 는 안전 을 고려 하여 폼 토 큰 을 추 가 했 습 니 다.Ajax 비동기 업데이트 데 이 터 를 통 해 일부 페이지 에서 데 이 터 를 새로 고침 하기 때문에 토 큰 이 업데이트 되 지 못 하고 이 어 두 번 째 로 데 이 터 를 새로 만 들 거나 업데이트 하 는 데 실 패 했 습 니 다.토 큰 의 검증 을 통과 할 수 없습니다.
물론 가장 쉬 운 방법 은 전체 페이지 를 새로 고침 하 는 것 입 니 다.이 로 인해 비동기 새로 고침 의 무의미 함 을 초래 합 니 다!인터넷 에서 많은 방법 을 찾 았 는데 여러 가지 방법 이 있다.보고 나 니 가장 좋 은 것 이 하나 있다.
Ajax 비동기 동적 으로 새 토 큰 을 만 들 고 로 컬 로 업데이트 할 것 을 요청 합 니 다.
주요 사고:매번 폼 을 보 내 는 것 이 끝 난 후에(성공 여부 와 상 관 없 이)Ajax 비동기 로 새로운 폼 토 큰 을 요청 하고 폼 숨 김 영역 에 저장 합 니 다.다음 에 폼 을 제출 하면 새로운 폼 토 큰 을 사용 하여 통과 합 니 다.
최종 효 과 는 다음 과 같다.

V2.5.0.png
주로 세 단계 로 나 뉜 다.
첫 번 째 단계:Index 컨트롤 러 에서 Token 을 만 드 는 방법
Index 컨트롤 러 에서 만 드 는 것 을 선택 한 이 유 는 전체 admin(배경)에서 이 방법 을 편리 하 게 참조 할 수 있 는 것 을 고려 합 니 다.매번 컨트롤 러 에 따라 해당 하 는 방법 을 찾 을 필요 가 없습니다.즉,이 방법 은 다른 컨트롤 러 들 이 모두 인용 할 수 있다 는 것 이다!

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

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

두 번 째 단계:Javascript 에서 Ajax 를 만 들 고 새 토 큰 가 져 오기
배경 에 새 토 큰 을 만 드 는 주소 가 고정 되 어 있 습 니 다.즉,:
/admin/Index/,따라서 jQuery 의 Get 방법 을 통 해 이 영 패 를 쉽게 얻 을 수 있 습 니 다!

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

세 번 째 단계:Html 페이지 에 숨 김 영역 저장 토 큰 만 들 기
사실 ThinkpHP 의 폼 예제 코드 에는 이미 이 코드 가 있 습 니 다.페이지 를 처음 불 러 올 때 토 큰 은 페이지 에 따라 분 배 됩 니 다.뒤의 토 큰 은 Ajax 를 통 해 가 져 옵 니 다!

<!--      -->
<input type="hidden" id="__token__" name="__token__" value="{$Request.token}" />

마지막 으로,우 리 는 자바 script 에 해당 하 는 양식 을 제출 하 는 곳 에 문 구 를 추가 하여 새 토 큰 을 신청 할 수 있 습 니 다!예 를 들 어 아래 의 예제 코드 는 제출 후 성공 여부 와 상 관 없 이 새로운 토 큰 을 신청 했다.

/**
 * Ajax             
 * @Author DuDongHua
 * @DateTime 2018-04-28T21:21:23+0800
 * @param {  } Button        
 * @param {  } Modal    
 * @param {  } Controller    
 * @param {  } Action    
 * @param {  } Location Ajax       id
 *     ：             ，     <a>  onclick  
 *   ：
 *  1.  javascript   Thinkphp5 URL  ，   "{:url('" + Modal + "/" + Controller + "/" + Page + "')}  
 *              ， ：var MeURL = '/'+Modal+'/'+Controller+'/'+Page;
 */
function EditData(Button,Modal,Controller,Action,Location,Page){
 //       
 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); //      
 //       
 $.ajax({
  url: '/'+Modal+'/'+Controller+'/'+Action,
  type: 'POST',
  data: $(Button).closest("form").serialize(), //     
  dataType: 'json',
  success: function(data){
   //        
   // window.location.reload(); //           ajax        
   loadAjaxHTML(MeURL,Location);
   showMsg(data.msg);
   setLoaderIn(false); //      
   getNewToken();  //    Token
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
   showMsg(XMLHttpRequest.status+" "+XMLHttpRequest.readyState,textStatus,"red","#f60");
   getNewToken(); //    Token
  }
 });
}

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.