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>
