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]
}
}