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>
