Vue 2.x + Auth0页面保护：直接访问链接出现404问题

首先明确：你遇到的直接访问/logbook出现404的问题，和你提供的authGuard代码无关，核心原因是Vue单页应用（SPA）的路由模式特性，以及Apache服务器缺少对应的重写规则配置。

为什么本地正常、部署后出问题？ #

本地用npm run serve启动的是Vue自带的开发服务器，它已经默认处理了SPA的路由逻辑——所有请求都会指向index.html，由Vue Router负责匹配路由。但部署到Apache后，服务器会把/logbook当作物理文件路径去查找，找不到对应文件就直接返回404，根本没走到Vue的路由和authGuard逻辑那一步。

具体解决步骤 #

1. 确认Vue Router模式 #

先检查你的Vue Router配置，确保使用的是history模式（如果是hash模式不会有这个问题，但URL会带#）：

const router = new VueRouter({
  mode: 'history',
  routes: [/* 你的路由配置 */]
})

2. 配置Apache重写规则 #

在项目部署的根目录下创建.htaccess文件，或者修改Apache虚拟主机配置，添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这段规则的作用是：

• 开启URL重写引擎
• 若请求的不是真实存在的文件或目录，就把所有请求转发到index.html，交给Vue Router处理路由匹配

3. 验证authGuard逻辑（可选） #

虽然不是本次问题的根源，但可以确认你的authGuard逻辑是正常的：

• 它会在路由跳转前检查用户认证状态，未认证则跳转至Auth0登录页，登录完成后会自动跳回目标路由
• 只有当服务器正确把请求转发到index.html后，Vue的路由和authGuard才会开始工作

总结 #

先完成Apache的重写规则配置，让所有请求都指向index.html，之后直接访问/logbook时，Apache会把请求交给Vue处理，这时authGuard才会生效，404问题就能解决。

内容的提问来源于stack exchange，提问作者Martin Huus Bjerge