前端和后端分离时，后端由JWT验证，百度UEditor的富文本编辑器没有token参数。您需要自定义& # 34；授权& # 34；，下面进行令牌配置，这里我们重点介绍休米的编辑部分。
首先，我们介绍UEditor，其中@ before-init = & # 34；addCustomButton & # 34这是一个自定义的休米按钮，您可以在休米网站和百度编辑器网站查看配置文件。
& ltvue-u editor-wrap v-model = & # 34；msg & # 34 :config = & # 34；editorConfig & # 34 @ before-init = & # 34；addCustomButton & # 34 & gt；& lt/vue-u editor-wrap & gt；这里的用户定义参数ueditorToken传入sessionStorage.token或this。$ storage . get(& # 39；token & # 39)，可以在登录时生成。下面初始化UEditor配置。
创建了(){ this。editor config = { autohigh enabled:false，//编辑器不会被内容自动引发 initialFrameHeight: 600，//初始容器高度 initial frame width:& # 30 100% & # 34；，//初始容器宽度 server URL: & # 34；/site/demo/u editor & # 34；， UEDITOR _ HOME _ URL:& # 34；/u editor/& # 34；， catcheremoteimagable:true，//抓取远程图片 maximum words:& # 34；100000000"， ueditorToken:session storage . token | |这个。$ storage . get(& # 39；token & # 39)， }； }，在ueditor.config.js中添加自定义参数ueditorToken
//服务器认证令牌 ，ueditorToken:& # 34；token & # 34配置UEditor时，先将ueditor.all.js改为ueditor.all.min.js，以便后续修改。现在是时候修改远程抓拍的内容部分了，打开ueditor.all.min.js(原ueditor.all.js)进行修改。
这里添加自定义参数，请注意右边的行数，只添加一个带红框的句子。
function catchremoteimage(imgs, callbacks) { var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '', url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params), isJsonp = utils.isCrossDomainUrl(url), opt = { 'method': 'POST', 'dataType': isJsonp ? 'jsonp':'', 'timeout': 60000, //单位：毫秒，回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值 'onsuccess': callbacks["success"], 'onerror': callbacks["error"], 'options': me.options,//这里是增加的参数 }; opt[catcherFieldName] = imgs; ajax.request(url, opt); }
最后部分就是向后端中请求时增加验证的token函数catchremoteimage(imgs，callbacks){ var params = utils . serialize param(me . query command value(& # 39；serverparam & # 39)) || ''， URL = utils . format URL(catcherActionUrl+(catcherActionUrl . index of(& # 39；？') == -1 ?'？':'&')+ params)， isJsonp = utils . iscrossdomainurl(URL)， opt = { & # 39；方法& # 39；: '邮政& # 39；， & # 39；数据类型& # 39；:isJsonp？'jsonp & # 39:''， & # 39；超时& # 39；:60000，//单位:毫秒，回调请求超时设置。如果目标用户的网速不是很快，建议在这里设置一个较大的值 & # 39；成功& # 39；:回调[& # 34；成功& # 34；]， & # 39；一个错误& # 39；:回调[& # 34；错误& # 34；]， & # 39；选项& # 39；:me.options，//这里是添加的参数 }； opt[catcher field name]= imgs； ajax.request(url，opt)； }最后一部分是从后端请求时添加认证令牌。
红框部分是休米的请求部分，是下面的第一个；二是对UEditor上传图片请求的验证。
if (method == "POST") { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader("Authorization", ajaxOptions.options.ueditorToken); xhr.send(submitStr); } else { xhr.setRequestHeader("Authorization", ajaxOptions.options.ueditorToken); xhr.send(null); }
