vue js 两个SPA

Question

我正在构建一个具有两种布局（用于登录页面和仪表板）的网络应用程序。它们每个都表示为 SPA 应用程序，因此每个都有路由器视图。主要问题是'How to connect them and redirect from one to another?'。

我有一个 App.vue - 检查用户是否被授权。如果是 - 重定向到 Dashboard.vue，否则 - 重定向到 Login.vue。他们每个人都有自己的路由器视图。

Answer 1

vue-router 可以为任何路由创建自定义守卫。您不需要 2 个单独的应用程序，只需使用路由器中的路由来确保安全。

https://router.vuejs.org/en/advanced/navigation-guards.html

你的守卫可以是一个检查身份验证的函数。

这是来自 Auth0 的完整实施教程：https://auth0.com/blog/vuejs2-authentication-tutorial/

Answer 2

一个 SPA 应该是一个单独的 html 文件，它为您的应用程序和所有路由提供服务，因此基本结构应该是：

HTML

<div id="app">

</div>

<!-- bundled file -->
<script src="app.js"></script>

app.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter)

import App from './components/App.vue' // import Base component

// Import views to register with vue-router
import Login from './components/views/Login.vue'
import Dashboard from './components/views/Dashboard.vue'

const guard = function(to, from, next) {
    // Check if user is logged in (you will need to write that logic)
    if (userIsLoggedIn) {
        next();
    } else {
        router.push('/login');
    }
};

const routes = [{
      path: '/login',
        component: Login
      },{
        path: '/dashboard',
        component: Dashboard,
        beforeEnter: (to, from, next) => {
            guard(to, from, next); // Guard this route
      }
}]

const router = new VueRouter({
    mode: 'history', // history mode 
    routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App) // mount base component
})

App.vue

<template>
  <div>
    <!-- Your layout -->

    <!-- All views get served up here -->
    <router-view></router-view>
  </div>  
</template>

我还没有测试过，但在这种情况下，每个视图组件都由安装在主 vue 实例上的 App.vue 提供服务。然后你使用 beforeEach 守卫来检查用户是否登录，如果他们是那么你调用 next() 将他们带到路由，如果他们不是那么你将他们重定向到登录。

vue js 两个SPA

vue js two SPAs

single-page-application

vue.js

vue-router