有效利用Forward跳转功能

forward的概念相对于redirect是比较陌生的,但是熟悉jsp等开发语言的话就会了解forward的作用,但是跟jsp forward实现原理有些不同。

forward跳转,发生在服务器端,相当于暂停当前的请求处理,并代为请求另外一个指定的地址,然后将该地址的响应内容直接推送到浏览器端。

forward产生的效果是浏览器地址栏不会发生改变,对于浏览器端来说只是一次请求。即保持浏览器地址不变的情况下,后端可以根据业务逻辑跳转到不同的业务页面。

forward的用法是 ctx.forward(url) 。 参数url既可以是同域名下的相对页面地址,也可以是到不同域名的绝对地址。相对地址是 / 开头的地址,例如 '/product/123'; 绝对地址是http/https协议开头的地址,例如 'http://a.com'。

需要注意的是,若跳转到其他域名页面,意味着浏览器端是访问a.com的地址,展示的是b.com的页面,b.com的页面下若有相对路径的地址,那么可能无法在浏览器端加载出来。

forward跳转是具有一定实用意义的,可以保证在同一个路由配置的情况下,展示不同的业务页面。比如这样一个实际需求:

有文章、产品两种详情页面,每种页面都有一个分享按钮。分享到同一个路由地址,并且可以跟踪分享后的浏览点击情况。

那么可以这样配置分享功能的路由:

share-router.js
{
  '/share/view/:shareId': {
    api: '/api/share/info',
    handle(data, ctx) {
      const shareInfo = data.info;
      const { shareType, typeId } = shareInfo;

      if (shareType === 'article') {
        return ctx.forward(`/article/${typeId}`);
      }

      if (shareType === 'product') {
        return ctx.forward(`/product/${typeId}`);
      }

      return null;
    },
    view: 'share/default-show'
  },
  '/get/share-url/:shareType/:typeId': {
    api: '/api/share/record',
    handle(data, ctx) {
      const shareId = data.record.shareId;

      ctx.body = {
        shareId,
        shareUrl: `/share/view/${shareId}`;
      }
    }
  }

  '/article/:id': {
    // ... 文章详情的路由配置
  },
  '/product/:id': {
    // ... 产品详情的路由配置
  }
}

然后在文章或产品详情的分享按钮,点击后请求 /get/share-url/:type/:typeId 来获取分享的地址(/share/view/${shareId}),:type指article|product类型,:typeId指article|product的访问id。

当用户点击获取的分享地址(/share/view/${shareId})查看,就可以把${shareId}传递给后端api接口,后端根据shareId=${shareId}跟踪记录此次的点击次数等信息,并返回对应的shareType和typeId,然后根据shareType和typeId forward跳转到对应的业务详情地址。这样就保证了浏览器端地址栏还是/share/view/${shareId},而内容则根据${shareId}的不同而显示文章详情或产品详情。

这种分享需求实际可能有更多种页面,如果每种页面都是不同的分享地址和处理逻辑,那么工作量就很大,forward功能正好提供了一种集中处理的办法,提高效率。

Last updated