Условно визуализируем Vue Элементы или Компоненты высшего порядка? - PullRequest
Новая
       3

Условно визуализируем Vue Элементы или Компоненты высшего порядка?

0 голосов
/ 01 апреля 2020

Я немного рассол. Любая помощь была бы отличной

Я занимаюсь этим уже некоторое время и пробовал разные вещи, прежде чем обратиться к вам. Вы - моя последняя линия защиты.

Проблема:

У меня есть Vue страница, настроенная с VueRouter, и некоторые базовые c JWT auth. Я хочу визуализировать элемент Header на некоторых страницах, но не на других.

Я пытался использовать v-if, но он неопрятен и не выглядит правильным.

Я пытался ответить на этот вопрос: Как отобразить заголовок и боковую панель после входа в систему, используя Vue, но после страницы входа в систему она отображает пустые страницы

Вот примеры (упрощенно)

Приложение. js: 

<template >
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
    export default {
       name: "app"
    }
</script>

маршрутизатор / индекс. js: 

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

import Home from './view/Home.vue'
import Login from './view/Login.vue'
import PageContainer './container/PageContainer.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  path: '/',
    component: () => import('../container/PageContainer.vue'),
    children: [ 
      { 
        path: '',
        name: "home",
        component: () => Home
      },
      {
        path: '*',
        redirect: '/'
      }
    ]
]

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

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('token');

  if (authRequired && !loggedIn) {
    return next('/login');
  }

  next();
})

export default router

PageContainer: 

<template>
    <div class="container">
        <Header/>
        <div class="main">
            <Navbar/>
            <section class="page">
               <router-view/>
            </section>
        </div>
    </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Header from './Header.vue'

export default {
    name: "container",
    components: {
        Navbar,
        Header
    }
}
</script>

Если я попытаюсь go указать базовый URL, страница Login будет правильно отображаться в соответствии с условием router.beforeEach. После успешного входа в систему и хранения JWT он:

  • попадает beforeEach

  • не go в состояние

  • должен нажать next(), но страница не перенаправляется?

Мне нравится версия решения с маршрутизатором больше, чем v-if, которая заставляет меня проверять токен, говорит, что пользователь уже существует или нет, и в зависимости от того, какие страницы отображаются , но это не правильно? Я попробовал кучу других глупостей, пытаясь заставить его работать, но безрезультатно.

Я относительно новичок в Vue, так что любой вклад будет оценен. Спасибо

1 Ответ

0 голосов
/ 01 апреля 2020

Хорошо, я понял это. Методом проб и ошибок. Я немного изменил переменную routes в router/index.js, и это сработало. Если кому-то это понадобится, я оставлю это здесь.

По какой-то причине у него возникла проблема с рендерингом функции безымянной стрелки, но на самом деле она не выдавала ошибку в консоли. 

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  path: '/',
    component: PageContainer,
    children: [ 
      { 
        path: '',
        name: "home",
        component: Home
      },
      {
        path: '*',
        redirect: '/'
      }
    ]
]

Ура!

...