前端集成—Angular 1.0项目iframe嵌入Vue项目

---

---

angular代码修改

加入集成模块： app/app.js

angular.module('vue-integration', []);

angular.module('paas-model', ['quota',
  'configuration',
  ... ... ,
  'vue-integration',
]) 

angular.module('app', [
  'ngAnimate',
  'ui.router',
  ... ... ,
  'vue-integration',
])  

iframe集成的样式： /vue-integration/_vue-integration.scss

.vue-integration-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    &::after {  height: 0px;  }
    .iframe-container {
        min-height: 600px;
        width: 100%;
        height: 100%;
        margin-top: 0px;
        margin-left: 0px;
        display: block;
    }
}

iframe集成的html代码 ： /vue-integration/vue-integration.html

<div class="vue-integration-container">
    <!--<iframe src="http://localhost:8082/user-management/user-address?token=eyJhb... ...7QuA"
    hspace="0" vspace="0" scrolling="yes" height="100%" width="100%" id="main" name="main" frameborder="0"
        class="iframe-container"></iframe>-->
    <iframe ng-src="{{ctrl.vueUrl}}"
    hspace="0" vspace="0" scrolling="yes" height="100%" width="100%" id="main" name="main" frameborder="0"
        class="iframe-container"></iframe>
</div>

iframe集成的控制器代码 ： /vue-integration/vue-integration.js.controller.js

angular.module('vue-integration').controller('vueIntegrationController', ['$stateParams','CurrentUserService','AppConfig','$sce','$state',function ($stateParams,CurrentUserService,AppConfig,$sce,$state) {
    var vm = this;
    var target = $stateParams.target //vue目标页面路径
    // var token = "eyJhbGc... ...lEg7A";
    var token = CurrentUserService.getUserToken();
    var protocal = window.location.protocol;
    var hostname = window.location.hostname;
    var vue_integration_port = AppConfig.vue_integration_port;
    pageRouter = ''
    switch(target){
        case 'user-address': // 用户地址
            pageRouter = `/user-management/${target}`;
            break;
        case 'product-list': // 商品列表
            pageRouter = `/product-manage/${target}`;
            break;
        default:
            pageRouter = '';
            break;
    }
    var url = `${protocal}//${hostname}:${vue_integration_port}${pageRouter}?token=${token}`;
    vm.vueUrl = $sce.trustAsResourceUrl(url); //解决跨域问题
}]);

Angular加入路由： /vue-integration/vue-integration.route.js

'use strict';

angular.module('vue-integration').config(function ($stateProvider) {
    $stateProvider
    .state('app.userAddress', {
      url: "/:target",
      templateUrl: "/vue-integration/vue-integration.html",
      controller: "vueIntegrationController",
      controllerAs: "ctrl",
      resolve: {
        load: ['$ocLazyLoad', function ($ocLazyLoad) {
          return $ocLazyLoad.load({
            files: [
              '/vue-integration/vue-integration.js.controller.js',
            ]
          });
        }]
      }
    })
    .state('app.productList', {
        url: "/:target",
        templateUrl: "/vue-integration/vue-integration.html",
        controller: "vueIntegrationController",
        controllerAs: "ctrl",
        resolve: {
          load: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load({
              files: [
                '/vue-integration/vue-integration.js.controller.js',
              ]
            });
          }]
        }
    })
});

app/directive/layout-menu/menu.html

  <div class="panel"><!--需要加权限-->
     <div ng-class="{'active': vm.isAddressProductActive }" data-parent="#accordion"
     data-toggle="collapse" data-target="#alarmItem" aria-expanded="{{vm.isAddressProductActive }}">
      <a>
        <i class="icon iconfont iconzuodaohangjiankongguanli"></i>
          <span>用户商品管理</span>
	          <i class="fa fa-caret-up"></i>
     </a>
   </div>
      <ul id="alarmItem"
               ng-class="{'collapse in': vm.isAlarmitemManagementActive, 'collapse': !vm.isAlarmitemManagementActive}">
          <li ng-class="{'active': vm.userAddress}">
                 <a ui-sref="app.trapAlarmItem({target:'user-address'})" ui-sref-opts="{reload:'app.userAddress'}">
                     <span>用户地址管理</span>
                  </a>
              </li>
          <li ng-class="{'active': vm.isProductListActive }">
                  <a ui-sref="app.asyncTask({target:'product-list'})"   ui-sref-opts="{reload:'app.productList'}">
                     <span>商品列表</span>
                  </a>
         </li>

app/directive/layout-menu/menu.js

vm.isUserAddressActive = $state.includes('app.userAddress');
vm.isProductListActive = $state.includes('app.productList');
vm.isAddressProductActive = vm.isUserAddressActive || vm.isProductListActive ;

---

---

Vue代码修改

src/api/ajax.js

const token = JSON.parse(localStorage.getItem('Admin-Token')).token
改为：
const token = getJSONToken('Admin-Token')

src/router/index.js

function getUrlParam(name) {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
  let r = ((window.location.search).substr(1) || location.href.split('?')[1] || '').match(reg); // 匹配目标参数
  if (r !== null) {
    return decodeURIComponent(r[2]);
  }
  return null; // 返回参数值
}
//获取token
let url = window.location.href
if (url.indexOf('token=') !== -1) {
  const token = getUrlParam('token')
  setToken('Admin-Token',token)
  url = url.slice(0, url.indexOf('?'))
  window.location.href = url;
}