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) {
      // 塞入外部链接传入的token
      localStorage.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>