javascript - 使用 UI 路由器和 token 在 AngularJS 中重定向

Question

我正在为 Angular SPA(单页应用程序)编写代码。

• 在后端，它连接到一个用 Java 编写的引擎，该引擎执行大部分处理(我不关心)。

• 我正在使用 UI Router 进行路由。

问题

但是有一个棘手的情况我无法完成。

• 登录时，我进行 API 调用，该调用返回 JSON 格式的响应。

• 如果我的调用成功(即登录凭据匹配)，我会在返回的 JSON 中获得一个 token ，它基本上只是一个由符号、字母和数字组合而成的字符串。

• 我将其保存在我的 rootscope 中，然后通过 $rootScope.myToken 访问它。

• 然后，我在后续 API 调用中使用相同的 token 。

现在我想要在 AngularJS 中做的是将用户重定向到登录页面(如果他/她未登录)并尝试通过在地址栏中输入直接访问某些 URL。

我在这里找到了一个相当简单的方法Redirect on all routes to login if not authenticated 。但是我无法用我的 token 来实现这一点。

问题

我应该怎么做才能使其与 token 一起工作？除了这个答案之外，任何其他建议也欢迎。

PS:我在 stackoverflow 上尝试了多种方法，但发现它们要么在我的上下文中不起作用，要么过于复杂。

更新:我可以在我的代码中成功实现Simon H's答案。然而我面临的问题是，这只会在我至少登录和退出我的应用程序之后按照我想要的方式重定向。如果我尝试直接通过 URL 访问页面而不至少登录和退出一次，则此方法会失败，但我仍然可以访问该页面。有小费吗？

Answer 1

网上有很多关于 Angular 和 JWT 的教程

我用它们来开发一些符合你想要的东西。代码的关键部分在配置中

$httpProvider.interceptors.push(function($q, $location, $localStorage, $injector) {
    return {
        'request': function (config) {
            config.headers = config.headers || {};
            if ($localStorage.token) {
                config.headers.Authorization = 'Bearer ' + $localStorage.token;
            }
            return config;
        },
        'responseError': function(response) {
            /* 401, unauthorised:
                - bad username / password
                - token expired
               403, forbidden - notAdmin
            */ 
            // if(response.status === 401 || response.status === 403) {
            if(response.status === 401) {
                console.log("app.js: httpInterceptor caught 40x:", response);
                $injector.get('$state').go('login');
            }
            // Replace reponse with rejected promise to prevent rest of execution
            return $q.reject(response);
        }
    };