vue 和 tp5之间的跨域传输token问题

最新推荐文章于 2024-04-07 16:19:42 发布

原创最新推荐文章于 2024-04-07 16:19:42 发布 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#thinkphp #vue #token

thinkphp 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Vue和ThinkPHP5（TP5）之间处理跨域传输token的问题，强调了防止请求重复提交的重要性。在Vue前端，通过axios请求获取并存储token，并配置请求头以携带cookie。在TP5后端，设置了跨域请求响应。测试结果显示功能正常，重点在于正确处理跨域请求时携带cookie。

vue 和 tp5之间的跨域传输token问题

前言:
1.为什么使用token?
防止请求重复提交
2.vue 使用token交互时，token总验证失败? 为空？
thinkphp 的表单令牌token 在vue 前后端分离开发情景下，
由于浏览器同源策略下出现跨域，但是我们都知道怎么处理一般情况下的跨域请求但是token这块如果缺少配置会出现问题。

屁话不多说开始上代码:(本文所有代码均在文章结尾处链接下载)

一.前端:(vue)

我们在页面渲染前与后端服务器请求token 存入cookie

<script>
export default {
...
  created:function(){
	    this.$post(
				this.GLOBAL.host+'fileup/index/gettoken')
				 .then((response) => {
				 	 this.$util.cookies.set('token', response.token)
				   })
  },
  </script>

此处利用axios工具进行请求
设置跨域请求参数，请求拦截器，响应拦截器

import axios from 'axios';
import qs from 'qs';
import util from './util.js';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
axios.defaults.withCredentials=true; /

//http request 拦截器
axios.interceptors.request.use(
  config => {
	let token = util.cookies.get('token')
	
	config.data = qs.stringify(config.data)
	
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded',
	  'token':token
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        query:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
	util.cookies.set('token', response.data.token)
	let token = util.cookies.get('token')
	console.log('token:'+response.data.token)
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

重点:这个 axios.defaults.withCredentials=true; 在前后端跨域请求（必携带cookie）时必须设置为true，
可以理解为当前请求为跨域类型时是否在请求中协带cookie

此后所有请求都会传输token 与刷新token

二.后端(tp5)

控制器:

//vue 页面渲染时获取token
 public function gettoken(){
        $token = request()->token();
        return json(['code'=>1,'token'=>$token]);
    }
 private  function checkToken ($token,$name = '__token__') {
        if(empty($token) || !\Session::has($name)){
            // 令牌无效
            return request()->token();
        }
        if (\Session::get($name) === $token){
            // 防止重复提交
            \Session::delete($name); // 验证完成销毁session
            return false;
        }
        // 开启TOKEN重置
        return request()->token();
    }
  //测试接口处理
   public function merge(Request $request){
        $token = $this->checkToken(request()->header('token',''));

        if($token){
            return json(['code'=>100,'msg'=>'请求失效','errCode'=>3,'token'=>$token]);
        }
        
        $token = request()->token()；
        return json(['code'=>200,'msg'=>'ok','errCode'=>3,'token'=>$token]);
    }

配置跨域请求:(我在行为里写的，可以继承在父类写也可以)

<?php

namespace app\fileup\behavior;
use think\Exception;
use think\Response;
class ApiAssoc
{
    public function run($dispatch)
    {
        //响应头设置
        
		  //全部允许(这种特别不安全)
		  //header('Access-Control-Allow-Origin:*');
		  //header('Access-Control-Allow-Methods:*');
		  //header('Access-Control-Allow-Headers:*');
		  //header('Access-Control-Allow-Credentials:false');

		
        //限制允许
     
        //当跨域请求需要携带cookie是，请求头中需要设置Access-Control-Allow-Credentials:true
        //Access-Control-Allow-Credentials值为true时，Access-Control-Allow-Origin必须有明确的值，不能是通配符（*)
        
        header('Access-Control-Allow-Credentials:true');
        $allow_origin = array(
            'http://192.168.1.102:9000'
        );
        $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
        if(in_array($origin, $allow_origin)){
            header('Access-Control-Allow-Origin:'.$origin);
        }
        header('Access-Control-Allow-Headers: X-Requested-With,Content-Type,Origin,OPTIONS,Cache-Control,Pragma,Authorization,Accept,Accept-Encoding,token');
        header('Access-Control-Allow-Methods: PUT,POST,GET,OPTIONS,DELETE');
        if (request()->isOptions()) {
            exit(json_encode(['code'=>'100']));
        }
    }

}

三.页面测试效果:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210623171751519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA0NDQyMA==,size_16,color_FFFFFF,t_70