使用jQuery/JavaScript的客户端路由

我正在尝试使用纯JS/jQuery来处理客户端逻辑（而不是像Angular这样的框架）。我现在遇到的问题是如何让用户登录

这是我的

login.hbs

文件：

<div align="center">
<h2 class="page-header">Account Login</h2>
<form>
  <div class="form-group">
    {{!-- Username --}}
    <input type="text" class="form-control" name="username" placeholder="Username" style="width: 20%">
  </div>
  <div class="form-group">
    {{!-- Password --}}
    <input type="password" class="form-control" name="password" placeholder="Password" style="width: 20%">
  </div>
  <button type="button" class="btn btn-success" onclick="login()">Login</button>
</form>
</div>

在服务器端，我在

index.js

中接受这个

PUT

请求：

$(document).ready(function() {
    login = () => {     
        var username = $("[name='username']").val()
        var password = $("[name='password']").val()
        $.ajax({
            type: "PUT",
            url: '/login',
            data: {
                username: username,
                password: password
            },
            success: function(response) {
                console.log('Success:')
                console.log(response)
            },
            error: function(error) {
                console.log("Error:")
                console.log(error)
            }
        })
    }
})

router.put('/login', function(req, res) {
    // Password is not encrypted here
    console.log('req.body')
    console.log(req.body)

    User.findOne({ username: req.body.username }, function(err, user) {
        // Password is encrypted here
        if (err) throw err
        console.log('user')
        console.log(user)

        bcrypt.compare(req.body.password, user.password, function(err, result) {
            if (result) {
                var token = jwt.encode(user, JWT_SECRET)
                return res.status(200).send({ user: user, token: token })
            } else {
                return res.status(401).send({error: "Something is wrong."})
            }
        })
    })
})

---

当前流程是：用户输入他们的凭据，这些凭据将返回到我的

ajax

请求中的

success

方法。凭据将显示在浏览器的控制台中（确认服务器和客户端正在通信）。问题是，我如何将此请求路由到配置文件页面（或任何其他页面）？也就是说，用户位于

http://localhost:3000/login

，成功登录后，它们将被路由到

http://localhost:3000/profile

，例如，显示其个人资料信息的位置。我很想学习这两种路由方式（服务器端和客户端）。谢谢

你试过什么？您是否尝试了

窗口。位置

？您关心的是客户端路由定义的很大一部分。客户端路由是单页应用程序的关键功能。但是，通常情况下，它们不会实际更改页面，它们只是简单地交换不同的视图。至于凭据，您通常在加载或登录时查询它们。要使客户端路由正常工作，您只需替换页面的一部分，然后只需在初始加载时请求凭据。登录可以返回服务器端验证的令牌，您可以将其保存在本地存储中。安全性是一个非常棘手的话题。我绝对同意数据不应该出现在URL中，但使用window.location只是执行所需操作的直接方式。我会研究部分页面替换，因为为每个屏幕使用不同的物理页面会导致糟糕的用户体验。另外，本地存储不安全。我认为这实际上只是一个概念证明。我将使用现有的框架。让所有这些都发挥作用是一项艰巨的任务。我很高兴我的评论对你有用：）如果你不喜欢Angular，还有很多其他框架，比如Aurelia、React、Ember等等。