V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
black11black
V2EX  ›  问与答

vue 包含前端路由的项目,部署时如何跟后端路由结合起来 ?

  •  
  •   black11black · 2020-03-08 20:38:01 +08:00 · 2805 次点击
    这是一个创建于 1712 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,新手在测试前端路由

    在前端实现路由以后,比如localhost:8080/indexlocalhost:8080/home绑定到了两个不同的组件

    然后我想 npm run build,把生成的前端文件使用 flask 做服务器跑。

    测试得到的实际结果是

    在测试状态下使用 node 运行的 npm run serve 服务器,前端路由功能正常,手动输入路由地址也会按照设定的前端路由逻辑执行。

    部署之后的 flask 服务器,如果单纯使用 js 内容进行链接跳转(比如使用 <router-link> 标签跳转),前端路由也是工作正常的。但是如果手动输入地址的话则会请求后端路由,而不会被前端路由拦截。(后端没有挂载相应的路由地址,所以返回 404 )</router-link>

    想请教一下各位带佬这个前后端路由结合的部署该怎么搞。 我想实现两个阶段的目标 1、一阶段是实现浏览器地址栏输入的所有跳转命令由 vue 拦截,使前端路由完全工作正常,不发送给 flask 2、二阶段是在一阶段的基础上我希望有一些路由被过滤掉,比如特定 api 的 get 或 post 地址,或者特定页面(比如登录页面),不由前端托管,仍然是直接请求后端(比如单独把不需要登录权限的页面,和需要权限的页面拆分出来做成两个页面,感觉安全性比较高)

    请问可以实现吗

    第 1 条附言  ·  2020-03-08 22:49:24 +08:00
    破案了

    对这个疑问的一个解释是,如果后端将路由返回给前端,比如输入 localhost/home,后端只需要按正常渲染模板,前端模板会自动识别这个地址,并且解析到对应位置。

    不可避免的一点是似乎生产环境无法实现浏览器输入网址不跳转,总归是要刷新一下界面的
    15 条回复    2020-03-09 20:49:55 +08:00
    moyupoi
        1
    moyupoi  
       2020-03-08 20:47:11 +08:00 via iPhone
    初始化时候吧路由请求下来,然后放 redux 里,用的时候取就行了
    randyo
        2
    randyo  
       2020-03-08 21:01:49 +08:00 via Android
    地址栏输入地址回车是一定需要后端路由的。后端需要返回入口页面。
    TmacV2
        3
    TmacV2  
       2020-03-08 21:02:56 +08:00 via iPhone
    新手同问
    black11black
        4
    black11black  
    OP
       2020-03-08 21:13:12 +08:00
    @moyupoi
    @randyo

    额,搜了一下 redux 好像是 react 组件,我这是 vue。所以大概思路就是,比如上面说的无论 /index 和 /home,实际上都是从本地 index.html 模板渲染出来的,比如我想在浏览器里访问 /home,需要后端截取路由然后用某种 carry 的方式跟 vue 交互,先打开 index 再跳转 home ?

    不过这么搞的话,前端路由说是优点是不用重载页面,这还是得重载啊
    moyupoi
        5
    moyupoi  
       2020-03-08 21:20:10 +08:00 via iPhone
    redux 只是名字和 react 差不多,实际上 redux 只是个中间件做状态管理,给谁用都行。你用 redux 也可以,用 vuex 也可以,只是把数据存储在缓存里,用的时候拿出来用,减少接口重复调用,也保证了跨页面同步数据
    lupkcd
        6
    lupkcd  
       2020-03-08 21:24:10 +08:00
    hash/history 模式了解一下
    randyo
        7
    randyo  
       2020-03-08 21:51:34 +08:00 via Android
    @black11black 刷新页面浏览器请求后端,拿到 index 页面的内容,然后开始解析,加载 js 并执行,js 根据地址栏来确定要渲染哪个页面。一切都是从 index 开始的。
    shintendo
        8
    shintendo  
       2020-03-08 21:55:03 +08:00
    gwy15
        9
    gwy15  
       2020-03-08 22:05:41 +08:00   ❤️ 1
    我梳理下楼主的逻辑,是不是这样的:
    前端引入 router 负责(部分不需要权限页面的)路由,但是后端( flask )也要管理部分需要鉴权的页面; API 部分还是由 flask 做。

    问题就在于如何在 前端负责路由的页面 和 后端负责路由的页面 之间进行跳转。

    这种杂交模式有点难受啊 XD

    不过应该可以实现,后端 nginx 像这样写:
    location / {
    try_files @flask_app /index.html =404;
    }
    会先尝试匹配 flask,没匹配到路由全部返回 SPA 渲染的 html。

    前端跳转对 route 里面的 meta 进行判断,如果需要鉴权使用正常跳转( location ),不需要鉴权直接用 router.push。
    thetbw
        10
    thetbw  
       2020-03-08 22:38:03 +08:00 via Android
    后端处理一下 404 错误,全都返回 vue 的 index.html,然后 vue 这时不就可以处理了吗,vue 如果没这个路由,由 vue 来处理 404 错误。不知道你觉得这样如何
    black11black
        11
    black11black  
    OP
       2020-03-08 22:46:48 +08:00
    @gwy15

    感谢,nginx 配置是一个很好的 route 思路。
    我的方案不用 nginx 也配出来了,更在 append 里。

    杂交主要的考量是看 vue 路由文档似乎有权限功能,没仔细看不知道是咋实现的,我窃以为即使后端做好权限管理,最好还是在无权限时不发送任何前端界面数据以避免攻击。不知道单纯使用前端路由的话能否实现在非认证状态下用户拿不到任何非认证界面之外的数据
    gwy15
        12
    gwy15  
       2020-03-08 22:54:34 +08:00
    @black11black 理论上是可以的,比如动态加载路由、把涉及到鉴权的静态文件要求 CDN 鉴权、给 nginx 加上 JWT 插件等等操作。但是这样仅仅能解决暴露静态文件给非授权用户,我认为即使将静态文件暴露给非授权用户并不是什么大不了的问题,与这一堆操作的成本不成正比。
    black11black
        13
    black11black  
    OP
       2020-03-08 23:06:41 +08:00
    @gwy15
    我觉得问题也不大,应该不用一定 nginx 重定向,可以服务端加个中间件搞定。
    suningyo
        14
    suningyo  
       2020-03-09 09:49:41 +08:00
    yimity
        15
    yimity  
       2020-03-09 20:49:55 +08:00
    配置一下服务端或者服务端的软件,404 的时候返回 index.html 就可以了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1747 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:47 · PVG 00:47 · LAX 08:47 · JFK 11:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.