AngularJS/ Spring Boot 应用程序 - 空闲时间后自动导航到登录页面

Posted 2023-02-27

【中文标题】AngularJS/ Spring Boot 应用程序 - 空闲时间后自动导航到登录页面

【英文标题】：AngularJS/ Spring Boot application - automatically navigate to signin page after an idle time

【发布时间】：2017-09-27 08:00:59

【问题描述】：

我在前端使用 AngularJS，在后端使用 Spring Boot/Spring Security。 后端是这样的：

@Component
public class TokenUtils 

public static final String MAGIC_KEY = "obfuscate";

public String createToken(final UserDetails userDetails) 
    final long expires = System.currentTimeMillis() + 1000L * 60 * 60;
    return userDetails.getUsername() + ":" + expires + ":" + computeSignature(userDetails, expires);


public String computeSignature(UserDetails userDetails, long expires) 
    final StringBuilder signatureBuilder = new StringBuilder();
    signatureBuilder.append(userDetails.getUsername()).append(":");
    signatureBuilder.append(expires).append(":");
    signatureBuilder.append(userDetails.getPassword()).append(":");
    signatureBuilder.append(TokenUtils.MAGIC_KEY);

    MessageDigest digest;
    try 
        digest = MessageDigest.getInstance("MD5");
     catch (NoSuchAlgorithmException e) 
        throw new IllegalStateException("No MD5 algorithm available!");
    
    return new String(Hex.encode(digest.digest(signatureBuilder.toString().getBytes())));


public String getUserNameFromToken(final String authToken) 
    if (null == authToken) 
        return null;
    
    final String[] parts = authToken.split(":");
    return parts[0];


public boolean validateToken(final String authToken, final UserDetails userDetails) 
    final String[] parts = authToken.split(":");
    final long expires = Long.parseLong(parts[1]);
    final String signature = parts[2];
    final String signatureToMatch = computeSignature(userDetails, expires);
    return expires >= System.currentTimeMillis() && signature.equals(signatureToMatch);
    

如果用户有一段时间不使用前端并通过例如返回到前端一个bottonclick，他被移动到登录页面。 我的意图是应用程序在到期时间后自动移动到登录页面。 有没有可能在前端使用 AngularJS 来做到这一点？

【参考方案1】：

你可能想使用ng-idle plugin

如何配置？

 myApp.config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) 
  IdleProvider.idle(5);
  IdleProvider.timeout(5);
  KeepaliveProvider.interval(10);
]);

如何在任何范围内实现和监听超时？

它在 $rootScope 发出一些事件。您可以在任何范围内收听 $scope.$on('IdleStart',fn) 喜欢的功能 这样您就可以调用注销 api 端点并更改登录页面的路由