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

[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 只做代理

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

[thinkershare]

一般不这么使用, 因为前后端模式都是组件化的, 你这么使用, 意味着很多单页面很容易处理的问题会变得复杂, 16 年左右我写过的一个程序大概是你说的这种---> 后台服务(n 个)---> 应用层---> API 层(路由权限在这里)---> Static Content(不能直接请求, 需要 API 服务器授权中间件)---> 前端(轻量化使用 jQuery), 另外路径和路由没啥关系, 完全可以任意映射. 核心问题是你为什么要这么做? 有什么好处?

[zoharSoul]

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

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

--------


你说的这个叫前后端不分离

[zoharSoul]

@zoharSoul #2 你描述的想法是前后端不分离的,
什么叫前后端分离? 意味着两者通过 api 来交互, 而不是后端返回 html

从体验来看, 前后端分离后的前端和 c 端(app 端)的逻辑是一致的.
你想想 android/ios 怎么处理你文中的这个需求:
```
除了路由问题，前端页面的权限控制怎么做？比如有这样一个需求，某些页面只能特定用户访问，任何无权限用户不应该获取到这些页面的任何信息，即便无权限用户根本不能请求相关 API 。
```
你就明白前后端分离的情况下, 这个职责是前端怎么处理了

[wunonglin]

不要 SPA 又不要 MVC 。你这不是自找麻烦么。。。

问：路由问题...
答：这就是你自己用 nginx 实现一个类似于前端路由的功能罢了，不仅 nginx 需要对 url 处理以便于返回对应的 html ，页面也要对 url 处理用于获取 params 请求 api ，明摆了没事找事而已。更别说还想做权限控制等功能了，你非要说能不能做，我肯定回答你“能”，但是好不好做，麻不麻烦，你就自己掂量掂量了。

问：折中的办法
答：
“前端服务端”，这不就是 SSR 么？用 vue 可以用 nuxt ，ng 可以用 universal 。

如果你就真手写一个一个页面的话也不是不行，写一些公共的 js ，例如 service.js 、url-params.js 等，公共方法，每个页面引用然后获取参数然后发送请求获取数据手动操作 dom

[jguo]

你描述的恰恰是单页应用，不是前后端分离。前后端分离的定义很简单，数据的处理和储存跟页面的渲染分成不同的项目，前端调后端的 api 实现数据传输。
另外你遇到的这些问题其他人早就遇到并做出解决方案了，比如 next 和 nuxt 。你可以直接拿来用或者参考他们的做法

[skinny]

@jguo 我说的就是前端调用后端 API 啊，页面渲染和怎么渲染依然由前端的 react 或 vue 代码做，只是说加了个服务端控制路由和对特定页面进行权限控制。粗略看了下 next 和 nuxt ，看起来符合我的需求。

[wunonglin]

@skinny #6 权限控制只需要后台返回对应 role 的 string array 或者 id array 。权限控制本质就是个开关。后台只需要告诉前端那些要开，剩下的事情由前端去控制开关即可

[corningsun]

如果从来没一个人写过前后端分离的项目，可以先找个项目学习下。

推荐“林间有风”的开源项目： https://doc.cms.talelin.com/

[james2013]

单页应用不是单页面的应用,可以有多个界面的
随便下个 vue 等前后端分离的后台管理系统看看怎么写的,权限,菜单,url 跳转等都有

[freeup]

我们项目是这样做的 由于页面和后台服务是独立部署，所以我们权限这一块只控 api 权限，就算能找到页面，打开页面请求数据的时候也因为没有授权而没有数据，而且为了方便（就是懒+提高性能）所有 api 都是固定的，也就是不会存在 /order/{id} 这种通配路径，对外只暴露一个网关端口，权限或相关后续服务需要的信息都在网关处理，针对控权限也就这么几种情况
1.菜单通过数据库拉出来
2.按钮也是通过配置然后由前段进行控制显隐
3.即使他们能找到对应的页面或 api ，由于没有授权 ，也是拿不到数据的

[skinny]

@freeup 谢谢

[zliea]

后端针对前端 html 进行限制可以使用 nginx+lua 脚本控制。

[pengtdyd]

前后端分离不适合多页应用，当然可以强上 SSR

[zliea]

@freeup 按照楼主的描述，其实楼主核心的问题还是没有解决。
如果是 api 返回页面内容你这种方案是可以的。
但楼主说的是静态页面，这种情况即使你在静态页面里添加了一个认证的 api 来控制显示，但实际上 html 也已经下载到客户的机器上了(例如 csdn 必须登录才能查看全文，就可以通过脚本去掉)

[skinny]

@ztechstack #12 我就是这个意思，当然也可以用其它技术替代，多加一层顺手的嘛 。我看了下楼上有人说的 next.js 的文档，就跟我说的这个差不多，不过用的是 node.js web 服务器来处理动态路由，乍看文档之下，如果我需要在这个框架控制特定页面的访问权限，需要编写一些代码。

[lybcyd]

你这相当于放弃后端和前端的成熟路由方案，转而使用 NGINX 实现路由。如果页面路由逻辑很简单还好，稍微加一些嵌套和通配符就不好做了。（比如你例子里面的）
能不能说说这么做的原因是啥呢？如果嫌弃 spa 首屏加载太慢，有很多优化手段。如果是为了 seo ，使用上面说的 SSR 就可以了

[skinny]

@lybcyd 我没说必须使用 nginx 实现路由啊，如果我文字没有描述清楚，那张图可以补充一下。

[skinny]

@lybcyd 所以我在问有没有更好的方法嘛，还有询问实际项目一般怎么弄，因为我根本不是干这个的，不了解这些，写自娱自乐的项目时刚好觉得这么做还不错就做了。

[joesonw]

任意 url 返回 index.html ，由前端解析 url 后，自行请求 API

[james122333]

分离 不透过后端取得页面(非文章内容)
你要前端也干后端的事情那不就也是一把梭了 再多个后端几乎没意义 多重验证?
含内容的伺服器如果有复杂验证 那实现的也就是一个小后端