如何添加统一登录

[whateveryoudo]

大神你好，从你的例子学到很多，现在多应用如何集成统一登录，再master主应用吗？ 感觉主应用是否不能使用vue-router。App.vue未找到router-view。

[whateveryoudo]

目前思路，将注册子应用逻辑转入容器vue中（App.vue存放router-view,与普通vue相同），容器vue内容如下`

前端微服务

<script> import { registerMicroApps, start, setDefaultMountApp } from "qiankun"; import { loader } from "../main"; export default { name: "App", props: { loading: Boolean, content: String, }, mounted() { this.startRegist(); }, data() { return {}; }, components: {}, methods: { startRegist() { registerMicroApps( [ { name: "gov-front", // app name registered entry: "//localhost:8002", loader, activeRule: "/gov-front", container: "#root-view", }, { name: "gov-test", entry: "//localhost:8004", loader, activeRule: "/gov-test", container: "#root-view", }, ], { beforeLoad: [ (app) => { console.log("before load", app); }, ], // 挂载前回调 beforeMount: [ (app) => { console.log("before mount", app); }, ], // 挂载后回调 afterUnmount: [ (app) => { console.log("after unload", app); }, ], // 卸载后回调 } ); setDefaultMountApp("/gov-front"); start(); }, }, }; </script> <style> </style>

修改router.js, 添加容器路由path(这里自定义子应用前缀用于匹配，这里是"gov-")import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";

Vue.use(VueRouter);

const routes = [
{
path: '/',
redirect: '/login'
},
{
path: "/login",
name: "login",
component: Login
},
{
path: "/gov-*",
component: Home
}
];
export default new VueRouter({
mode: 'history',
routes
});
`,然后就可以再登录后的vue,选择跳转的子应用，（形如：/gov-a, /gov-b，获取注册路由鉴权的逻辑也可以放在这里，这里要采用history模式)， 感觉是主应用router劫持了子应用， （搜过采用v-if再App.vue控制，但是这样就没有一个/login的界面，就很奇怪），看是否有更好的办法，希望提出来共同讨论。

[hql7]

我的登陆相关是一个独立子应用，可以达到共用目的，且目前主应用加路由有诸多不便之处， 在 2020-09-07 18:15:11，"ykx" <notifications@github.com> 写道： 目前思路，将注册子应用逻辑转入容器vue中（App.vue存放router-view,与普通vue相同），容器vue内容如下` 前端微服务 <script> import { registerMicroApps, start, setDefaultMountApp } from "qiankun"; import { loader } from "../main"; export default { name: "App", props: { loading: Boolean, content: String, }, mounted() { this.startRegist(); }, data() { return {}; }, components: {}, methods: { startRegist() { registerMicroApps( [ { name: "gov-front", // app name registered entry: "//localhost:8002", loader, activeRule: "/gov-front", container: "#root-view", }, { name: "gov-test", entry: "//localhost:8004", loader, activeRule: "/gov-test", container: "#root-view", }, ], { beforeLoad: [ (app) => { console.log("before load", app); }, ], // 挂载前回调 beforeMount: [ (app) => { console.log("before mount", app); }, ], // 挂载后回调 afterUnmount: [ (app) => { console.log("after unload", app); }, ], // 卸载后回调 } ); setDefaultMountApp("/gov-front"); start(); }, }, }; </script> <style> </style> 修改router.js, 添加容器路由path(这里自定义子应用前缀用于匹配，这里是"gov-")import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; import Login from "../views/Login.vue"; Vue.use(VueRouter); const routes = [ { path: '/', redirect: '/login' }, { path: "/login", name: "login", component: Login }, { path: "/gov-*", component: Home } ]; export default new VueRouter({ mode: 'history', routes }); `,然后就可以再登录后的vue,选择跳转的子应用，（形如：/gov-a, /gov-b，获取注册路由鉴权的逻辑也可以放在这里，这里要采用history模式)， 感觉是主应用router劫持了子应用， （搜过采用v-if再App.vue控制，但是这样就没有一个/login的界面，就很奇怪），看是否有更好的办法，希望提出来共同讨论。 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[whateveryoudo]

感谢大佬回复，可以将登录集成到目前的示例中吗， 还有关于通信：官方提供了一个onGlobalStateChange, setGlobalState感觉能够满足通信了呢， 最后问下vue微应用cli3 配置configureWebpack采用函数时，output配置无效，懒加载配置的 config.plugin('html').tap(args => {
args[0].chunksSortMode = 'none';
return args;
}); 也会导致微应用无法加载，有无相关处理办法