需求:
在a项目中嵌套b项目的b1页面,使用iframe 实现页面嵌套,但是token不共享的情况下如何存取token 正常访问B1页面。
实现:
后台提供不需要输入用户名密码的接口,跑定时任务可以正常获取token。但是iframe 无法正常使用get/setcookie 的方式存取token。只能改变思路使用
sessionStorage的setItem/getItem 方法。 代码:/** 设置缓存 **/ export function sessionSetItem(name, data) { window.sessionStorage.setItem(name, data) } /** 获取缓存 **/ export function sessionGetItem(data) { return window.sessionStorage.getItem(data); } /** 删除缓存 **/ export function sessionRemoveItem(data) { window.sessionStorage.removeItem(data) } /** 删除全部缓存 **/ export function sessionRemoveItemAll() { window.sessionStorage.clear() }
request.js文件引入上述方法
import { delCookie, getCookie, setCookie, sessionRemoveItem, sessionGetItem } from "./index.js";
并设置config 请求头的值
axios.interceptors.request.use( config => { //qs 系列化参数 if (!config.noLoading) { Vue.prototype.loadingCount++; Vue.prototype.nowloading(); } else if (Vue.prototype.loadingCount != 0) { Vue.prototype.loadingCount++; } if (config.contentType == 'application/json;charset=utf-8') { config.data = JSON.stringify(config.data) } else if (config.contentType == 'multipart/form-data;charset=utf-8') { config.data.append('token', getCookie('apToken')) } else { config.data = qs.stringify(config.data); } if (config.contentType) { config.headers['Content-Type'] = config.contentType; } //增加header参数(用户中心网关拦截) config.headers['btoken'] = getCookie('apToken') ? getCookie('apToken') : sessionGetItem('apSessionToken');return config; }, error => { return Promise.reject(error); } );
在b1页面定义获取token的方法,并用session存储即可。
// 获取token getTokenMsg(){ this.$get('请求接口路径').then(res=>{ if(res.code == '200'){ sessionSetItem('apSessionToken',res.data); console.log('111',sessionGetItem('apSessionToken')+','+res.data); this.handleSelectClick();//直接调用查询接口 } }) },
标签:contentType,存取,data,token,sessionGetItem,iframe,sessionStorage,config From: https://www.cnblogs.com/zhu-xl/p/16599136.html