Vue-router Memory模式路由组件加载异常及SSR权限校验问题求助

问题根源 #

你的vue-router配置存在致命错误：根路由path: '/'设置了redirect: '/'，会触发路由解析的无限重定向逻辑，进而导致客户端hydrate阶段的路由状态混乱。此外，服务端渲染时若未等待路由就绪，会造成服务端渲染页面的路由与客户端实际路由不匹配，触发客户端重新路由。

解决步骤 #

1. 修复根路由配置
   删除无意义的自重定向路由，或设置合理的默认跳转目标：

   const routes = [
       // 替换原自重定向路由
       {
           path: '/',
           redirect: '/playground' // 改为实际的默认路由
       },
       // ... 其他路由保持不变
   ];
   

2. 确保服务端路由就绪
   在服务端渲染的render函数中，必须先让路由跳转到当前请求的URL并等待路由就绪，再进行页面渲染。修改src/main-server.js中的render函数：

   export async function render(url, manifest) {
       const router = createRouter();
       // 跳转到当前请求的URL
       await router.push(url);
       // 等待路由解析完成，确保服务端渲染的路由与客户端一致
       await router.isReady();
   
       const app = createSSRApp(App);
       app.use(router);
   
       // ... 后续渲染逻辑（如获取布局、生成HTML等）
   }
   

3. 验证MemoryHistory配置
   服务端使用createMemoryHistory('/')是正确的，若部署在子路径下，需将参数调整为对应base路径。

核心思路 #

服务端通过Express中间件拦截HTTP请求，客户端通过Vue Router全局守卫拦截单页面跳转，同时同步服务端登录状态到客户端，避免两端状态不一致。

具体实现 #

1. 优化服务端中间件逻辑 #

当前的负向预查正则易出现匹配错误，改为先放行白名单路由，再挂载校验中间件的方式更可靠：

// server.js
// 先挂载不需要校验的路由（API、登录页、Socket.io等）
app.use('/api/login', loginRouter);
app.use('/api/signup', signupRouter);
app.use('/api/log/add', logRouter);
// 单独处理/entrance的SSR渲染，避免被校验中间件拦截
app.get('/entrance', async (req, res) => {
    // 复用现有SSR渲染逻辑
    const url = req.originalUrl;
    let template = await getIndexHTML();
    // ... 后续渲染步骤与现有SSR逻辑一致
});
app.use('/socket.io', socketIoHandler);

// 挂载校验中间件，对剩余所有请求生效
app.use(authCheckMiddleware);

// 最后挂载通用SSR渲染中间件
app.use(async (req, res) => {
    // ... 现有SSR渲染逻辑
});

2. 添加客户端路由守卫 #

在客户端路由初始化代码中添加全局前置守卫，拦截未授权的单页面跳转：

// src/main-client.js 或路由初始化文件
const router = createRouter();

router.beforeEach((to, from, next) => {
    // 从服务端注入的全局变量获取登录状态
    const isAuthenticated = window.__AUTH_STATE__;
    // 定义不需要授权的白名单路由
    const whiteList = ['/entrance'];

    if (whiteList.includes(to.path)) {
        return next();
    }

    isAuthenticated ? next() : next('/entrance');
});

const app = createApp(App);
app.use(router);
app.mount('#app');

3. 同步服务端登录状态到客户端 #

在服务端渲染的HTML模板中注入登录状态，让客户端直接获取：

// server.js
const html = template
    .replace(`<!--preload-links-->`, preloadLinks)
    .replace('<!--app-html-->', appHtml)
    // 注入登录状态到全局变量
    .replace('<!--auth-state-->', `<script>window.__AUTH_STATE__ = ${JSON.stringify(req.session.authenticated || false)}</script>`);

同时在index.html中添加占位符：

<!-- index.html -->
<body>
    <div id="app"><!--app-html--></div>
    <!--auth-state-->
    <!--preload-links-->
</body>

4. 架构调整说明 #

无需大幅调整现有架构，只需补充客户端路由守卫、优化服务端中间件顺序，并实现服务端到客户端的状态同步即可。

内容的提问来源于stack exchange，提问作者Sergey