AngularJs参考错误:require未定义。

3

我知道这个问题已经有其他相关的提问,但我已经阅读了超过10个答案,尝试了每一个答案,但都没有解决我的问题。

当我尝试加载外部纯JavaScript文件来编码JWT时,我遇到了这个错误:Uncaught ReferenceError: require is not defined

这是我正在尝试使用require()包含的文件:https://github.com/hokaccha/node-jwt-simple,我已经通过npm下载了它。

在我的代码中,我尝试了很多方法:

  • 使用grunt concact将其包含在main.js中;
  • <head>中手动加载<script src="path/to/folder"></script>
  • 为nodeJs安装了RequireJs。

尽管进行了这些尝试,我仍然遇到了相同的错误。我做错了什么?

这是我目前正在使用的代码:

index.html

<head>
<script type="text/javascript" src="dist/js/angular.min.js"></script>
<script type="text/javascript" src="dist/js/ui-router.min.js"></script>
<script type="text/javascript" src="dist/js/jwt.js"></script>
[... rest of head ...]

appCtrl.js(稍后将与应用程序的其余部分一起合并)

.controller('MainCtrl', 
    ['$rootScope', '$scope', '$state', 
    function($rootScope, $scope, $state) {
        var jwt = require('jwt');
        var payload = { foo: 'bar' };
        var secret = 'xxx';
        var token = jwt.encode(payload, secret);
        console.log(token);
}])

我的主要目标是基于JWT令牌处理用户身份验证。目前的问题是在用户登录应用程序时对令牌进行编码/解码。

即使有这些,我仍然遇到了错误。你们知道如何解决吗?


请使用完整版本的AngularJS,而不是.min.js。 - Joe Lloyd
1
@CelsomTrindade:用户身份验证在后端处理,您将使用JWT生成令牌并将其发送到客户端...您的客户端将在会话存储中存储该令牌,并检查每次访问的授权... - Thalaivar
1
@CelsomTrindade 在 JWT 网站上有几个不同的 PHP 库存储库列表。应该很容易找到教程。如果您没有运行节点服务器,则使用了错误的库文件。 - charlietfl
请纠正我,但我需要使用服务器编码代码来生成我的JWT,像这样,用于PHP。然后,在我的Web应用程序中,我将需要另一个函数来解码令牌并能够在我的应用程序中使用数据。例如,显示一个欢迎消息和已登录用户的名称。 - celsomtrindade
由于我是新手,所以一开始按照找到的文档进行操作,这些文档基于node。在看了评论后,我转而使用jwt.io网站提供的php库。但是,我仍然不知道如何使用它。不过现在我正在尝试更好的方法。 - celsomtrindade
显示剩余13条评论
2个回答

5
如果你想在客户端使用require,你需要使用像Browserifywebpack这样的东西(我绝对推荐后者)。
你遇到这个错误是因为实际上你从未在客户端代码中定义过require。该JWT存储库并不为您提供此功能。
另外,查看您提供的JWT存储库文档,它似乎期望您在node.js环境中使用它(该环境为您提供了commonjs require)。

在问题的一些评论后,我发现需要以另一种方式运行它。由于我的数据库是使用mysql/PHP,因此我将不得不使用jtw.io提供的PHP库来使用它。但我仍在努力弄清楚如何安装它以编码令牌。有任何想法吗? - celsomtrindade

0
在服务器端(即server.js文件)中,对于Node,请使用:
var jwt = require('jwt-simple');

然后,进行编码:

var secret = "Ieaticecreamforbreakfast";

在您的登录功能中...一旦您检查了登录条件

var token = jwt.encode({id: ID, otherInfo: "can go here"}, secret); 

res.send({token: token});

然后,您可以将响应令牌设置为头文件,以便在Angular前端中进行其他HTTP请求。因此,每当用户向后端发出请求时,您都可以访问其JWT中编码的ID。


那是我尝试过的,但没有成功。有什么关于如何在PHP后端使用它的想法吗? - celsomtrindade

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接