springboot使用cookie+fiter实现用户免密登录

springboot使用cookie+fiter实现用户免密登录,这个功能是我做springboot忽视的,但是又是特别有用的常用的功能。
做一自己就琢磨了一些时间,成功完成了。当然还有很多更好更便捷的方法去实现这个功能,后续有需要也会总结出来。现在进入正题。

首先解决跨域问题

在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。
如何解决跨域问题呢,有很多种方法。
详情可以见如何解决跨域问题

不过这里我用了过滤器解决跨域问题

过滤器类后端代码:

package com.mall.config;
import com.mall.entity.Users;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Arrays;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

@WebFilter(urlPatterns = "/*",filterName = "CORSFilter")
public class CORSFilter implements Filter {
    
    

//    private static final Set<String> ALLOWED_PATHS = Collections.unmodifiableSet(
//            new HashSet<String>( Arrays.asList("/index","/") )
//    );


    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    
    

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
    

        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");//这里不能写**代表接受所有域名访问,如写*则下面一行代码无效。谨记
        response.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许携带cookie
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "content-type,Authorization");

        filterChain.doFilter(servletRequest,servletResponse);


    }

    @Override
    public void destroy() {
    
    

    }
}

前端vue代码

在main.js中加入:

axios.defaults.withCredentials = true

以上解决了跨域问题,可以成功的运行跳转我们的页面,接下来就要进行免密登录功能的实现。

基本逻辑

在这里插入图片描述
首先后端需要把用户的信息存放在cookies中,对于创建cookies需要了解的属性如果不熟悉,建议大家去官网查看

package com.mall.controller;

import com.mall.entity.Users;
import com.mall.service.UserService;
import lombok.RequiredArgsConstructor;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("user")
@RequiredArgsConstructor
public class UserController {
    
    
    private final UserService userService;

    @GetMapping("findUser")
    public Map<String, Object> findUser(HttpServletResponse response, HttpServletRequest request, String username, String password) {
    
    
        HashMap<String, Object> map = new HashMap<>();
        try {
    
    
            Users user = userService.findUser(username, password);
            map.put("res", user);
            map.put("success", true);
            Cookie cookie = new Cookie("user", URLEncoder.encode(user.toString(),"utf-8"));
            cookie.setDomain("localhost");
            cookie.setPath("/");
            cookie.setMaxAge(60 * 60 * 24);
            response.addCookie(cookie);
        } catch (Exception e) {
    
    
            e.printStackTrace();
            map.put("success", false);

        }
        System.out.println("登录的用户:" + map);
        return map;
    }

}




在这里插入图片描述

然后从前端获取cookies
用vue获取cookies首先需要安装cookies

npm install vue-cookies --save

然后引入

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

获取cookies

console.log(this.$cookies.get("user"))

进行判断在页面加载前,判断如果cookies中存在user就获取他的uid,存到页面中,避免再次登录

  created() {
    
    
    this.findAll();
    if(this.$cookies.get("user")!=null){
    
    
      this.user.uid=this.$cookies.get("user")[10]
    }
  }

猜你喜欢

转载自blog.csdn.net/weixin_43902063/article/details/108311217
今日推荐