Question

我生成了一个quasar CLI应用程序并添加了基本登录名。在spa模式下工作正常。但是在SSR模式下，如果登录后刷新，则会收到水化错误。我尝试根据类星文档进行调试。但是它显示图像是导致错误的原因

<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>

我尝试将其删除，错误消失了。但是，如果未登录，则不会发生相同的水化错误。因此，问题显然不是图像。我添加到此应用程序的唯一一件事是基本身份验证。所以我想我搞砸了。

我的启动文件

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，即使该错误已登录，该错误也不会发生。因此，我认为这是问题所在。我已将其逻辑放在 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
}

我认为我已经弄乱了这个文件中的内容，因为如果我从路由中删除元数据，它将工作而不会出现水化错误。有人可以告诉我如何解决这个问题吗？

quasar ssr应用程序在重新加载时显示水化错误

0 个答案: