Question

许多javascript框架利用锚标记在SPA中建立路由。是否可以捕获锚定路由以在进行身份验证时保存在会话存储中？

例如，使用快递和护照，我有：

routes.js

//node stuff above
app.get('/', auth.savePath, pages.index);

auth.js

exports.savePath = function (req, res, next) {
    if (!req.isAuthenticated()) {
        req.session.returnPath = req.originalUrl
        return res.redirect('/login')
    }
    next()
}

req.originalUrl不捕获锚路径，只捕获应用程序路径和查询字符串变量 - 任何想法？我在快递文档中没有看到任何可以捕获此信息的内容。

Answer 1

哈希片段（你称之为锚点）永远不会发送到浏览器，所以你无法捕获它。要么将URL方案更改为不使用散列片段，要么更好：使用客户端库在客户端执行逻辑。存在许多这样的库，通常称为“客户端路由器”。

Answer 2

您可以使用app.param解释here

以下是一些代码。 req.params.id捕获'id'。

app.param('id', /^\d+$/);
  app.get('/user/:id', function(req, res){
  res.send('user ' + req.params.id);
});

使用Angular-ui-router，我相信您可以解决上述目的：

 var myApp = angular.module('myApp', ['ui.router']);
 myApp.config(function($stateProvider, $urlRouterProvider) {

 // Now set up the states
 $stateProvider
  .state('/', {
    url: "/",
    templateUrl: "partials/loginQuestion"
   })

快递路由器将包含以下内容：

app.get('/partials/:name', function (req, res) {
    var name = req.params.name;
    console.log(name);
    res.render('partials/' + name);
});

Answer 3

我最近必须这样做：登录后重定向到哈希的URL。我的解决方案是从document.location.hash捕获哈希片段并将其存储在登录表单中的隐藏字段中。然后在护照本地策略功能中，我用

捕获它

req.flash('redirectHash' : req.body.myHiddenFieldName).

身份验证后的默认重定向路由到我的主页，但在该路由中，我检查req.flash('redirectHash')是否为空;如果它不为null，我用它来完成我的重定向到所需的位置。

没有在浏览器之间进行测试，但在chrome中工作。

Answer 4

以下是捕获锚链接的方法。适用于所有Web框架。

我将使用示例方案来说明：我们需要捕获未经身份验证的用户请求的深层网址http://server.com /＃/ xyz ，以便他们可以在登录后重定向到那个深度的URL。

未经身份验证的用户请求http://server.com /＃/ xyz （来自＆＃39;＃＆＃39;以后的所有内容都不会发送到服务器）。
所有服务器都知道用户想要http://server.com/并且他们未经身份验证。服务器将用户重定向到登录表单。

这里有一个聪明的一点：客户端仍在等待他们的原始请求，所以如果服务器在登录表单中包含一个隐藏元素，其中一些JS引用window.location.href，它可以捕获原始请求的完整网址完成了锚点部分：

<form action="/login" method="post">
  <div>
    <label>Username:</label>
    <input type="text" name="username"/><br/>
  </div>
  <div>
    <label>Password:</label>
    <input type="password" name="password"/>
  </div>
  <!-- XXXXXXXXX CLEVER BIT XXXXXXXXXX-->
  <script>
    document.write('<input type="hidden" name="from" value="'+document.location.href+'"/>');
  </script>
  <!-- XXXXXXXXXX-->
  <div>
    <input class="submit-button" type="submit" value="Submit"/>
  </div>
</form>

用户对自己进行身份验证，并使用POST发送原始URL。然后，服务器可以将用户转发到原始的深层URL。

使用Node Express和Passport捕获Anchor链接/路由

4 个答案: