AngularJs ReferenceError：require未定义

I know there is other questions about this problem, but I've ready more than 10 answers and tried every single one and none of them worked for me.

我知道还有其他关于这个问题的问题，但是我已经准备好了10个以上的答案，并尝试了每一个答案，但没有一个能为我工作。

I'm getting this error: Uncaught ReferenceError: require is not defined when i try to load an external plain javascript file to encode in JWT.

我收到此错误：未捕获ReferenceError：当我尝试加载外部普通javascript文件以在JWT中编码时，未定义require。

This is the file I'm trying to include with require(): https://github.com/hokaccha/node-jwt-simple I've download with npm.

这是我试图用require（）包含的文件：https：//github.com/hokaccha/node-jwt-simple我用npm下载。

In my code I tried lots of things.

在我的代码中，我尝试了很多东西。

Include in the main.js with grunt concact;
包含在带有grunt concact的main.js中;
Load manually inside the <head> with the <script src="path/to/folder"></script>;
使用
Install RequireJs with npm for nodeJs;
使用npm为nodeJs安装RequireJs;

With all of those attempts, I got the same errors. What am I doing wrong?

通过所有这些尝试，我得到了同样的错误。我究竟做错了什么？

This is the code I'm using right now:

这是我现在使用的代码：

index.html

的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 (will concat later on the build with the rest of the app)

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);
}])

My main objective with this is to handle the user authentication based on a JWT token. The problem right now is to encode/decode the token when the user is login in into the app.

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

Even with all of these, I still get the error. Do you guys know how to fix this?

即使有了所有这些，我仍然会得到错误。你们知道如何解决这个问题吗？

2 个解决方案

#1

If you want to use require on the client, you need to use something like Browserify or webpack (I definitely recommend the latter).

如果你想在客户端上使用require，你需要使用Browserify或webpack之类的东西（我绝对推荐后者）。

You're getting that error because, in fact, you have never defined require anywhere on your client-side code. That JWT repo does not provide that functionality for you.

您收到该错误的原因是，事实上，您从未在客户端代码的任何位置定义过require。 JWT回购没有为您提供该功能。

Also, looking at the docs for the JWT repo you provided, it appears that it expects you to use it in a node.js environment (which provides the commonjs require for you).

另外，查看您提供的JWT仓库的文档，似乎它希望您在node.js环境中使用它（它为您提供了commonjs需求）。

#2

On the server side (ie server.js file), for node, use:

在服务器端（即server.js文件），对于节点，使用：

var jwt = require('jwt-simple');

Then, to encode:

然后，编码：

var secret = "Ieaticecreamforbreakfast";

and in your login functionality... once you check the login criteria

并在您的登录功能...一旦您检查登录标准

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

res.send({token: token});

You can then set the response token in as a header for additional http requests in your angular, frontend side. Therefore, whenever a user makes a request to the backend, you have access to their encoded ID in the JWT

然后，您可以将响应令牌设置为您的角度前端中的其他http请求的标头。因此，只要用户向后端发出请求，您就可以在JWT中访问其编码ID

#1