項目場景：
需求是點擊預(yù)覽時 跳轉(zhuǎn)的一個新的頁面展示
問題描述
window.open攜帶不了token進行一個請求
原因分析：
window.open()方法直接根據(jù)文件路徑進行跳轉(zhuǎn) 根本沒有走請求 自然攜帶不了token,知道原因以后就好解決了 我們可以先通過window.opne()方法 把我們需要的參數(shù)傳遞并打開一個新的頁面
Window open() 方法 | 菜鳥教程
這是window.open 的使用方法 自行查看 如果你的需求只是打開可以不用跳轉(zhuǎn)頁面 直接把路徑放在open方法里即可
本文僅介紹window.open方法攜帶請求頭進行預(yù)覽文章來源：http://www.zghlxwxcb.cn/news/detail-554624.html
本文前提是后端給你返回的是pdf文件流 如是普通文件流 那么此方法在最后把文件流轉(zhuǎn)為url時 iframe不能識別文章來源地址http://www.zghlxwxcb.cn/news/detail-554624.html
解決方案：
//根據(jù)路由跳轉(zhuǎn)即可 須要在router文件中定義一個靜態(tài)路由? let url=this.$router.resolve({ ? ? ? ? path:'/view' ?}) //這個時候你需要把你需要請求接口的參數(shù)和須要的token 傳遞過去? let token=res.filetype; window['res']={id,token} //跳轉(zhuǎn)新頁面 window.open(url.href, "_blank"); //接著在你打開的頁面的create中拿到傳遞過來的數(shù)據(jù) let recetive=window.opener['res'] //拿到數(shù)據(jù)以后就開始走接口 因為使用的是axios 所以請求自帶token async yl(){ //這個時候你拿到的數(shù)據(jù)應(yīng)該是blob流的 無法直接識別 須要轉(zhuǎn)成url地址 let res=await yl(this.id) this.url=whndow.URL.createObjectURL(res) } //最后在template中使用一個標簽 <iframe :src="url" style="border:none;width:100%;height:100%;"></iframe> //最后就完美解決了
到了這里，關(guān)于前端實現(xiàn)window.open實現(xiàn)pdf預(yù)覽以及請求時攜帶請求頭通過后端權(quán)限校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
