【问题标题】:Nuxt creating micro-apps which share the app stateNuxt 创建共享应用状态的微应用
【发布时间】:2020-11-17 15:18:42
【问题描述】:

我正在使用nuxt 来创建我的应用程序的界面,我在这里面对一堵墙。我想基本上在两个微型应用程序中构建我的 nuxt 应用程序,如下所示:


|--- nuxt.config.js
|--- admin
|------ components
|------ pages
|------ middleware
|--- frontend
|------ components
|------ pages
|------ middleware

创建两个微应用而不是两个独立的 nuxt 应用的原因是我想在两个应用之间共享vuex 状态,而在 vuex 状态下,我基本上有兴趣了解两个微内的用户登录状态应用程序(如果我将应用程序完全分开,我将无法做到)。

我使用nuxt官方auth模块处理用户认证,将用户登录状态保存在vuex store中。

我想出的最接近的解决方案是在nuxt.config.js 文件中使用具有不同值的srcDir,如下所示:

export default {
  srcDir: 'admin/'
}

并通过环境变量将其更改为以下:

export default {
  srcDir: 'frontend/'
}

但它有一个相同的缺点,即它不共享两个微应用之间的应用状态(例如用户登录状态)。

有什么办法可以解决这个问题吗?

【问题讨论】:

    标签: authentication vuex nuxt.js


    【解决方案1】:

    我认为最好像这种结构在页面级别解决这个问题!

    |--- nuxt.config.js 
    |----components
    |----pages
    |------- admin
    |------- frontend   
    |----middleware
    

    并在 auth 中将用户重定向到相关页面和路由

    【讨论】:

    • 我认为我们不能在 pages 文件夹中拥有这些文件夹(例如组件、中间件)。但是,我可以在每个根文件夹(例如组件、中间件、插件)中创建两个名为 adminfrontend 的子文件夹。但是,这有两个缺点,它使代码更加复杂。另一个问题,在我的例子中更重要的是,我们不能使用反向代理来为来自两个不同域的两个不同文件夹的页面提供服务。例如:admin.example.com 提供来自/pages/admin/ 的页面 *.example.com 提供来自/pages/frontend/ 的页面
    • 我编辑它以更正一个!请立即检查
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-07
    • 1970-01-01
    • 1970-01-01
    • 2018-09-17
    • 2014-02-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多