Question

我正在构建一个包含两个布局的Web应用程序（用于登录页面和仪表板）。它们中的每一个都表示为SPA应用程序，因此每个都有路由器视图。主要问题是如何连接它们并从一个链接到另一个？＆＃39;。

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

Answer 1

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()将其带到路由，如果不是，则将其重定向到登录。

Answer 2

vue-router能够为任何路线创建自定义防护。您不需要2个单独的应用程序，只需要对路由器中的路由进行一些安全保护。

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

您的警卫可以是检查身份验证的功能。

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

vue js两个SPA

2 个答案: