Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)

1. 改造子Vue项目进行适配(ruoyi举例)

(1) 在路由文件添加需要被外链的vue页面配置

// 若依项目的话是 router/index.js文件
{path: '/contrast',component: () => import('@/views/contrast/index'),hidden: true
},

(2) 开放白名单

// 若依项目的话是 permission.js 文件
const whiteList = ['/login', '/register','/contrast']

(3) 在被外链的页面获取父项目传递的token

created() {var query = this.$route.query;if (query.token) {// 塞入外部链接传入的tokenlocalStorage.setItem('externalToken', query.token)// 若依使用的Cookies插件在内嵌获取值时获取不到改用 localStorage// setToken(query.token)}},

(4) 改造request请求的token封装

// 若依项目的话是 request.js文件
let externalToken = localStorage.getItem('externalToken');
if (externalToken) {config.headers['Authorization'] = externalToken
}

添加位置

2. 父Vue项目配置一个菜单指向一个Vue页面

<template><div v-if="src"><iframe :src="src" width="100%" height="600px"></iframe></div>
</template><script>export default {data() {return {src: '',// 子vue项目的router路径url: 'http://127.0.0.1/contrast',token: ''}},created() {this.src = `${this.url}"?token=${this.token}`}}
</script><style scoped lang="scss"></style>