请问大家多页面应用怎么做前后端分离？资源定位和前端页面权限控制怎么做？实际项目里是怎么做的？

[skinny]

最近在写一个自己的小项目，是一个多页面应用，综合考量下，选择了前后端分离这种架构。

注意，不是单页应用！

某些问题可能有点简单，请多多包涵。

首先，我开始以为的前后端分离是这样的：

• 服务端负责提供 API （包括权限验证、增删查改、会话）
• 前端浏览器负责 UI 渲染和逻辑控制，前端相关的 js/css/html 等资源都是静态文件，可以放在 CDN

然后我想到一个路由问题，比如客户端请求了一篇文章的 URL ，该怎么处理？ 这里有两种路由格式：

• /articles/#/1

  nginx 直接返回 /articles.html 或 /articles/index.html ，然后前端解析 hash 并请求相关资源，再渲染出来

• /articles/1

  这种需要编写 nginx 规则来拆分 URL ，其它基本同上

上面这些遇到简单结构的 URL 还好，但是结构化的复杂的 URL 就不好处理，比如获取用户 1 的文章 1 ，URL 为“/users/1/articles/1”，这种又该如何处理？我能想到的是仍然返回 /articles.html 或 /articles/index.html ，然后前端再根据制定的 URL 规则解析处理。

除了路由问题，前端页面的权限控制怎么做？比如有这样一个需求，某些页面只能特定用户访问，任何无权限用户不应该获取到这些页面的任何信息，即便无权限用户根本不能请求相关 API 。

综合上面的问题，我想到一个折中的办法：

• API 服务端照旧

• 编写一个“前端”服务端负责前端页面权限验证、管理路由规则，数据获取和操作仍然通过 API 服务。

  比如有这样一个页面“/users/{uid}/dashboard/user-details?uid=xxx”，服务端路由 handler 取得客户端的 token ，向 API 服务查询权限， 如果该用户具有某些已标记权限则返回该页面，否则返回 403 或重定向到某页面。

  这样前端服务器仍然可以选择和 API 服务器不一样的技术，可以使用 node 一把梭，也可以用 openresty ，还可以用其它的技术。

• nginx 只做代理

最后，有更好的办法吗？你们的实际项目又是怎么做的？

[lybcyd]

@skinny 看你的项目类型吧，就像上面说的如果不追求 seo 那就直接 vite 做 spa ，开发体验很舒适。如果想要 seo 那就 nextjs 或者 nuxtjs ，看你是用 react 还是 vue 。
路由的话，几个库的 router 和这两个脚手架都封装的很好，可以充分满足你的需要。vue 的权限可以用路由钩子实现，react 路由直接是一个组件，添加一下权限逻辑封装一下就可以用了。

[Unicorns96]

能问小项目为啥要使用“多页面应用”吗

[skinny]

@Unicorns96 我乐意

[itechnology]

不是，前后端分离项目为啥要管地址栏的 url ？不是通过 api 来交互吗？我们公司现在用的方案是，后台管理页面提供一个路由配置界面，然后给角色授权的时候可以授权每个角色可以看到的路由，前端通过 api 接口请求当前用户能看到的路由。然后前端根据返回的路由进行动态渲染。

[skinny]

@itechnology api 管的是数据操作和会话这些啊，也就是后端，前端页面是另一拨，前端也有路由规则啊，我帖子里可能说的不够清楚，我是既想要客户端渲染（至少大部分），还想要服务端的动态路由，更想更好的权限控制，比如客户端在访问某些页面时没有权限，那服务端就什么相关的都不给，直接返回 403 或重定向走。关于关注地址栏的 URL 是在这种全都要的情况下开始没有想清楚……完全有别的更好的解决办法……

[itechnology]

@skinny 那我说的这种方案就能解决。前端路由分为静态路由和动态路由两种。静态路由是直接写死在路由文件里面的；动态路由可以跟 api 接口返回结果来动态渲染路由，也就是说，如果 api 接口不返回某个路由，那么他是不能看到对应的页面的。

[skinny]

@itechnology 我知道啊，就是我有个需求有点变态，如果客户端没有权限，我连这部分的 html 和渲染代码都不返回，跟传统的那种服务端渲染一样，不过我想到办法了，next 和 nuxt 也接近需求，不过是不是你们认为的前后端分离就不知道了……

打个比方，后端是个合金保险箱保护的设备，看不到里面，按对密码才吐点东西出来，前端（浏览器）路由就像一层层的防弹玻璃墙，尽管外面的客户端拿不到东西，但是可以看透这一层层玻璃墙里的样子，尽管很多人觉得那些东西不重要，但我觉得重要，我认为只有按对了密码，对应的那层玻璃墙才应该透明。

[Unicorns96]

@skinny 单纯好奇而已，大可不必这回复态度吧。

[zachlhb]

后端不变，前端再套一个 node

[qfdk]

next.js 满足你的需求. 它可以做 spa 活着 ssr 服务端渲染. 单独的页面也可以控制. 切实你需要一个鉴权请求， 如果请求过去用户有权限你就开放有权限的部分就好了. 没权限的直接 404. SPA 会有 token 存下来的 每个请求带着 token 请求. next 的 SSR 渲染 会先请求 再渲染页面. 里面你也可以用 api 文件夹 里面放上你后段逻辑. 建议看下文档 然后跑一下 应该满足你所有需求.