路由冲突后续版

前言

这些日子总是碰到 Gin 与 Vue 的路由问题，今天又碰到了一个新问题。

问题

我使用 Vue 开发的是单页面应用，使用 Vue-Router 进行单页面路由。

这就是问题的开始，之前的文章解决了文件访问不到的情况。但是却解决不了单页面应用的路由问题。

比如：我想要在未登录的情况下重定向到登录页，但是单页面应用只有一个 url，所以会导致跳转不过去，因为页面都不存在。

最终方案

最后选择了反向代理的方案，通过前端来判断是否登录，没有登录再通过前端内部去路由到登录页。

然后后端在 cookie 失效的时候重定向到首页就行了。

后端的都反向代理到 8082 端口

下面是 Caddyfile 文件，我使用的是 caddy 来进行反向代理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

:8081 {
      handle /api/* {
             reverse_proxy localhost:8082
      }
      handle /auth/* {
             reverse_proxy localhost:8082
      }

      handle {
             root * /web/dist
             encode gzip zstd
             file_server
             try_files {path} /
      }
}

总结

前后端分离的项目，路由问题挺折腾的，最后选择了反向代理的方案，目前用下来基本没什么问题了，不出意外这个就是最终方案了。