欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第二十七章 登录

程序员文章站 2022-03-25 14:09:17
...

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 登录页面：

1.1 修改路径信息：

我们在页面输入登录信息，然后点击登录，发现请求的路径不对，我们的认证接口是：

/api/auth/accredit

我们打开 login.html，修改路径信息，页面 ajax 请求：

第二十七章 登录
然后再次测试，成功跳转到了首页。

1.2 解决 cookie 写入问题：

查看首页 cookie，发现什么都没有。

1）问题分析：

跨域请求 cookie 生效的条件：

  • 服务的响应头中需要携带 Access-Control-Allow-Credentials 并且为 true。
  • 响应头中的 Access-Control-Allow-Origin 一定不能为*，必须是指定的域名
  • 浏览器发起 ajax 需要指定 withCredentials 为 true

看看我们的服务端 cors 配置：

第二十七章 登录
没有任何问题。

再看客户端浏览器的 ajax 配置，我们在 js/common.js 中对 axios 进行了统一配置：

第二十七章 登录
一切OK。那说明，问题一定出在响应的 set-cookie 头中。我们再次仔细看看刚才的响应头：

第二十七章 登录
发现 cookie 的 domain 属性似乎不太对。cookie 也是有域的限制，一个网页，只能操作当前域名下的 cookie，但是现在我们看到的地址是0.0.1，而页面是 www.leyou.com，域名不匹配，cookie 设置失败了！

2）跟踪 CookieUtils：

Debug 跟踪 CookieUtils，看看到底是怎么回事，发现内部有一个方法，用来获取 Domain：

第二十七章 登录
它获取 domain 是通过服务器的 host 来计算的，然而我们的地址竟然是：127.0.0.1:8087，因此后续的运算，最终得到的 domain 就变成了：

第二十七章 登录
问题找到了：我们请求时的 serverName 明明是：api.leyou.com，现在却被变成了：127.0.0.1，因此计算 domain 是错误的，从而导致cookie设置失败。

3）解决 host 地址的变化：

这里的 server name 其实就是请求的时的主机名：Host，之所以改变，有两个原因：

  • 我们使用了 nginx 反向代理，当监听到 api.leyou.com 的时候，会自动将请求转发至 127.0.0.1:10010，即 Zuul。
  • 而后请求到达我们的网关 Zuul，Zuul 就会根据路径匹配，我们的请求是 /api/auth，根据规则被转发到了 127.0.0.1:8087 ，即我们的授权中心。

我们首先去更改 nginx 配置，让它不要修改我们的 host：proxy_set_header Host $host;

第二十七章 登录
把 nginx 进行 reload，这样就解决了 nginx 这里的问题。但是 Zuul 还会有一次转发，所以要去修改网关的配置（leyou-gateway 工程）：

第二十七章 登录
但此时，我们再次登录，发现依然没有 cookie，发现，响应头中还是没有 set-cookie。

4）Zuul 的敏感头过滤：

Zuul 内部有默认的过滤器，会对请求和响应头信息进行重组，过滤掉敏感的头信息：

第二十七章 登录
会发现，这里会通过一个属性为 SensitiveHeaders 的属性，来获取敏感头列表，然后添加到 IgnoredHeaders 中，这些头信息就会被忽略。而这个 SensitiveHeaders 的默认值就包含了 set-cookie：

第二十七章 登录
解决方案有两种：

全局设置：

  • zuul.sensitive-headers=

指定路由设置：

  • zuul.routes..sensitive-headers=
  • zuul.routes..custom-sensitive-headers=true

思路都是把敏感头设置为 null。

第二十七章 登录

2. 首页判断登录状态：

虽然 cookie 已经成功写入，但是我们首页的顶部，登录状态依然没能判断出用户信息。这里需要向后台发起请求，获取根据 cookie 获取当前用户的信息。

2.1 页面 JS 代码：

页面的顶部已经被我们封装为一个独立的 Vue 组件，在 /js/pages/shortcut.js 中，打开 js，发现里面已经定义好了 Vue 组件，并且在 created 函数中，查询用户信息：

第二十七章 登录
查看网络控制台，发现发起了请求，因为 token 在 cookie 中，因此本次请求肯定会携带 token 信息在头中。

2.2 后台实现校验用户接口：

我们在 leyou-auth-service 中定义用户的校验接口，通过 cookie 获取 token，然后校验通过返回用户信息。

  • 请求方式：GET
  • 请求路径：/verify
  • 请求参数：无，不过我们需要从 cookie 中获取 token 信息
  • 返回结果：UserInfo，校验成功返回用户信息；校验失败，则返回401
/**
  * 验证用户信息
  * @param token
  * @return
  */
@GetMapping("verify")
public ResponseEntity<UserInfo> verifyUser(@CookieValue("LY_TOKEN")String token){
    try {
        // 从token中解析token信息
        UserInfo userInfo = JwtUtils.getInfoFromToken(token, this.properties.getPublicKey());
        // 解析成功返回用户信息
        return ResponseEntity.ok(userInfo);
    } catch (Exception e) {
        e.printStackTrace();
    }
    // 出现异常则，响应500
    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}

2.3 刷新 token：

每当用户在页面进行新的操作，都应该刷新 token 的过期时间，否则30分钟后用户的登录信息就无效了。而刷新其实就是重新生成一份 token，然后写入 cookie 即可。事实上，每当用户来查询其个人信息，就证明他正在浏览网页，此时刷新 cookie 是比较合适的时机。因此我们可以对刚刚的校验用户登录状态的接口进行改进，加入刷新 token 的逻辑。

/**
 * 验证用户信息
 * @param token
 * @param request
 * @param response
 * @return
 */
@GetMapping("verify")
public ResponseEntity<UserInfo> verify(@CookieValue("LY_TOKEN")String token,HttpServletRequest request, HttpServletResponse response){
    try {
        //通过jwt工具类使用公钥解析jwt
        UserInfo user = JwtUtils.getInfoFromToken(token,this.jwtProperties.getPublicKey());
        if (user == null){
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
        }
        //刷新jwt中有效时间
        token = JwtUtils.generateToken(user, jwtProperties.getPrivateKey(), this.jwtProperties.getExpire());
        //刷新cookie中有效时间
        CookieUtils.setCookie(request,response,this.jwtProperties.getCookieName(),token,this.jwtProperties.getExpire()*60);
        //解析成功返回用户信息
        return ResponseEntity.ok(user);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}

3. 网关的登录拦截器：

接下来，我们在 Zuul 编写拦截器，对用户的 token 进行校验，如果发现未登录，则进行拦截。

3.1 引入 jwt 相关配置：

既然是登录拦截，一定是前置拦截器，我们在 leyou-gateway 中定义。

首先在 pom.xml 中，引入所需要的依赖：

<dependency>
    <groupId>com.leyou.common</groupId>
    <artifactId>leyou-common</artifactId>
    <version>1.0.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>com.leyou.auth</groupId>
    <artifactId>leyou-auth-common</artifactId>
    <version>1.0.0-SNAPSHOT</version>
</dependency>

然后编写 application.yml 属性文件，添加如下内容：

leyou:
  jwt:
    pubKeyPath:  C:\\tmp\\rsa\\rsa.pub # 公钥地址
    cookieName: LY_TOKEN # cookie的名称

编写属性类，读取公钥：

@ConfigurationProperties(prefix = "leyou.jwt")
public class JwtProperties {

    private String pubKeyPath;// 公钥

    private String cookieName;

    private PublicKey publicKey; // 公钥

    private static final Logger logger = LoggerFactory.getLogger(JwtProperties.class);

    /**
     * @PostContruct：在构造方法执行之后执行该方法
     */
    @PostConstruct
    public void init(){
        try {
            // 获取公钥和私钥
            this.publicKey = RsaUtils.getPublicKey(pubKeyPath);
        } catch (Exception e) {
            logger.error("初始化公钥和私钥失败！", e);
            throw new RuntimeException();
        }
    }


    public String getPubKeyPath() {
        return pubKeyPath;
    }

    public void setPubKeyPath(String pubKeyPath) {
        this.pubKeyPath = pubKeyPath;
    }

    public String getCookieName() {
        return cookieName;
    }

    public void setCookieName(String cookieName) {
        this.cookieName = cookieName;
    }

    public PublicKey getPublicKey() {
        return publicKey;
    }

    public void setPublicKey(PublicKey publicKey) {
        this.publicKey = publicKey;
    }

}

3.2 编写过滤器逻辑：

基本逻辑：

  • 获取 cookie 中的 token
  • 通过 JWT 对 token 进行校验
  • 通过：则放行；不通过：则重定向到登录页
@Component
@EnableConfigurationProperties(JwtProperties.class)
public class LoginFilter extends ZuulFilter {

    @Autowired
    private JwtProperties properties;

    @Override
    public String filterType() {
        return "pre";
    }

    @Override
    public int filterOrder() {
        return 5;
    }

    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Override
    public Object run() throws ZuulException {
        // 获取上下文
        RequestContext context = RequestContext.getCurrentContext();
        // 获取request
        HttpServletRequest request = context.getRequest();
        // 获取token
        String token = CookieUtils.getCookieValue(request, this.properties.getCookieName());
        // 校验
        try {
            // 校验通过什么都不做，即放行
            JwtUtils.getInfoFromToken(token, this.properties.getPublicKey());
        } catch (Exception e) {
            // 校验出现异常，返回403
            context.setSendZuulResponse(false);
            context.setResponseStatusCode(HttpStatus.FORBIDDEN.value());
        }
        return null;
    }
}

重启，刷新页面，发现请求校验的接口也被拦截了，需要对某些接口放行。

3.3 白名单：

注意，并不是所有的路径我们都需要拦截，例如：

  • 登录校验接口： /auth/**
  • 注册接口： /user/register
  • 数据校验接口： /user/check/**
  • 发送验证码接口： /user/code
  • 搜索接口： /search/**

另外，跟后台管理相关的接口，因为我们没有做登录和权限，因此暂时都放行，但是生产环境中要做登录校验：

  • 后台商品服务： /item/**

所以，我们需要在拦截时，配置一个白名单，如果在名单内，则不进行拦截。

在 application.yaml 中添加规则：

leyou:
  filter:
    allowPaths:
      - /api/auth
      - /api/search
      - /api/user/register
      - /api/user/check
      - /api/user/code
      - /api/item

在过滤器中的 shouldFilter 方法中添加判断逻辑：

@Component
@EnableConfigurationProperties({JwtProperties.class, FilterProperties.class})
public class LoginFilter extends ZuulFilter {

    @Autowired
    private JwtProperties jwtProperties;

    @Autowired
    private FilterProperties filterProperties;

    @Override
    public String filterType() {
        return "pre";
    }

    @Override
    public int filterOrder() {
        return 10;
    }

    @Override
    public boolean shouldFilter() {
        //获取白名单
        List<String> allowPaths = this.filterProperties.getAllowPaths();

        //初始化运行上下文
        RequestContext context = RequestContext.getCurrentContext();
        //获取request对象
        HttpServletRequest request = context.getRequest();
        //获取请求的路径
        String url = request.getRequestURI().toString();

        for (String allowPath : allowPaths ){
            if (StringUtils.contains(url,allowPath)){
                return false;
            }
        }
        return true;
    }

    @Override
    public Object run() throws ZuulException {
        //初始化运行上下文
        RequestContext context = RequestContext.getCurrentContext();
        //获取request对象
        HttpServletRequest request = context.getRequest();

        String token = CookieUtils.getCookieValue(request,this.jwtProperties.getCookieName());
        /*if (StringUtils.isBlank(token)){
            context.setSendZuulResponse(false);
            context.setResponseStatusCode(HttpStatus.UNAUTHORIZED.value());
        }*/

        try {
            JwtUtils.getInfoFromToken(token,this.jwtProperties.getPublicKey());
        } catch (Exception e) {
            e.printStackTrace();
            context.setSendZuulResponse(false);
            context.setResponseStatusCode(HttpStatus.UNAUTHORIZED.value());
        }
        return null;
    }
}
相关标签： 项目 spring java

上一篇： 一个简单的java定时任务

下一篇： php记录日志的实现代码

推荐阅读