Приложение quasar ssr показывает ошибку гидратации при перезагрузке - PullRequest
Новая
       21

Приложение quasar ssr показывает ошибку гидратации при перезагрузке

0 голосов
/ 09 июля 2020

Я создал приложение CLI quasar и добавил базовый c логин. Он отлично работает в режиме спа. Но в режиме SSR. Если я обновляю sh после входа в систему, я получаю ошибку гидратации. Я пробовал отлаживать согласно документации квазара. Но он показывает изображение как причину ошибки 

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-full.svg"
    >
  </q-page>
</template>

<script>
  export default {
    name: 'Dashboard'
  }
</script>

Я попытался удалить его, и ошибка исчезла. Но такой же ошибки гидратации не произойдет, если вы не войдете в систему. Так что проблема явно не в изображении. Единственное, что я добавил в это приложение, - это базовая c авторизация. Так что я думаю, что все испортил.

Мои загрузочные файлы

boot / auth. vue

// import something here
import axios from 'axios'
import { LocalStorage } from 'quasar'
export default async ({ app, router, store }) => {
  if (LocalStorage.has('user')) {
    const userString = LocalStorage.getItem('user')
    // setup vuex
    store.$db().model('users').create({
      data: userString.user
    })
    // setup localstorage & axios headers
    store.$db().model('users').afterLoginSetup(userString)
  }

  axios.interceptors.response.use(
    response => response,
    error => {
      // if login route no need to reload
      if (error.response.status === 401 && router.currentRoute.path !== '/login') {
        store.$db().model('users').logout()
      }
      return Promise.reject(error)
    }
  )
}

routes / index. js

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      {
        path: '/login',
        component: () => import('pages/auth/Login.vue')
      },
       {
        name: 'Dashboard',
        path: '/dashboard',
        component: () => import('pages/Dashboard.vue'),
        meta: { requiresAuth: true }
      }
     ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

Если я удалю meta: { requiresAuth: true } из dashboard, ошибка не появится, даже если он вошел в систему. Так что я думаю, что где-то здесь проблема. Я поместил logi c для этого в routes / index. js

import Vue from 'vue'
import VueRouter from 'vue-router'
import { LocalStorage } from 'quasar'

import routes from './routes'

Vue.use(VueRouter)
export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({
      x: 0,
      y: 0
    }),
    routes,

    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })
  Router.beforeEach((to, from, next) => {
    const loggedIn = LocalStorage.getItem('user')
    if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
      next('/')
    }
    next()
  })

  return Router
}

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

...