iframe标签存取token的问题

需求:

在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();//直接调用查询接口
                }
            })
        },

 

posted @ 2022-08-18 16:19  巫小婆  阅读(3609)  评论(0编辑  收藏  举报