AngularJS同页链接正常，新标签打开跳转登录页问题求助

我帮你分析下这个问题，这种新标签页打开跳登录的情况在AngularJS+Token认证的场景里挺常见的——核心原因是新标签页是全新的应用上下文，原来存在内存里的令牌会丢失，导致后端校验时认为用户未登录，触发了重定向。哪怕你说令牌始终有效，新标签页启动时也没法直接读取之前页面内存里的令牌，得做持久化和自动加载的处理。下面给你一步步的解决方案：

1. 先把令牌持久化到本地存储 #

AngularJS默认的内存存储在新标签页打开时会清空，所以必须把登录后的令牌存到localStorage或者sessionStorage里，而不是只存在内存变量中。

修改你的登录逻辑，登录成功后把令牌存入本地存储：

// 示例：登录成功后的处理逻辑
$http.post('/api/login', loginCredentials)
  .then(function(response) {
    const authToken = response.data.token;
    // 存入localStorage，持久化保存
    localStorage.setItem('authToken', authToken);
    // 同时存入你的认证服务（比如AuthService）供当前会话使用
    AuthService.setToken(authToken);
  });

2. 应用启动时自动加载令牌 #

在应用的run块里，添加初始化逻辑，页面加载时自动从本地存储读取令牌并设置到认证服务中，确保新标签页启动时能拿到令牌：

app.run(['$rootScope', 'AuthService', function($rootScope, AuthService) {
  // 页面初始化时读取本地存储的令牌
  const savedToken = localStorage.getItem('authToken');
  if (savedToken) {
    // 将令牌设置到认证服务中
    AuthService.setToken(savedToken);
  }
}]);

3. 配置HTTP拦截器自动携带令牌 #

要确保所有HTTP请求（包括新标签页初始化时的接口请求）都自动带上令牌，避免后端校验失败。可以通过HTTP拦截器实现：

// 创建认证拦截器
app.factory('authInterceptor', ['AuthService', function(AuthService) {
  return {
    request: function(config) {
      const token = AuthService.getToken();
      if (token) {
        // 给请求头加上Authorization字段
        config.headers['Authorization'] = `Bearer ${token}`;
      }
      return config;
    }
  };
}]);

// 注册拦截器到$httpProvider
app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
}]);

4. 给需要登录的路由添加认证校验 #

你的home.eventlist.requestdetail这类需要登录才能访问的状态，要在路由配置里加resolve逻辑，确保进入状态前先验证令牌的有效性，而不是只依赖前端内存中的状态：

.state('home.eventlist.requestdetail', {
  url: '/requestdetail',
  params: {
    paramOne: "defaultValueOne",
    paramTwo: "defaultValueTwo",
    paramThree: "defaultValueThree",
    paramFour: "defaultValueFour"
  },
  views: {
    'homedetailview@home': {
      templateUrl: 'RequestPages/DetailedRequest.html',
      controller: 'ctrlRequestDetail',
    }
  },
  // 添加resolve进行登录校验
  resolve: {
    auth: ['AuthService', '$state', function(AuthService, $state) {
      const token = AuthService.getToken();
      if (!token) {
        // 没有令牌直接跳登录页
        $state.go('login');
      }
      // 可选：调用后端接口验证令牌是否真的有效
      return AuthService.validateToken(token)
        .catch(function() {
          // 令牌无效跳登录页
          $state.go('login');
        });
    }]
  }
})

5. 处理ui-sref新标签页打开的细节 #

当用户右键点击ui-sref链接选择新标签页打开时，要确保链接带上target="_blank"，同时新标签页的初始化流程已经完成了上面的令牌加载步骤：

<!-- 在你的cellTemplate里添加target="_blank" -->
cellTemplate: '<a ui-sref=".requestdetail({paramOne:row.entity.RequestId, paramTwo:row.entity.EventId, paramThree: 1,paramFour: defaultValueFour})" target="_blank" class="ui-grid-cell-contents">{{COL_FIELD}}</a>'

最后总结下 #

核心就是解决新标签页上下文的令牌丢失问题：通过本地存储持久化令牌，应用启动时自动加载，让HTTP请求和路由校验都能正确拿到令牌，这样新标签页打开时就能正常识别登录状态，不会被重定向到登录页了。

内容的提问来源于stack exchange，提问作者simple user