SpringBoot+vue前后端分离【实现拦截器/单点登录】
1、注意(登录后jsessionid不一致的问题:解决思路)
-
以前:单体项目拦截器,登录后要把登录状态保持下来,就用到tomcat的会话跟踪技术:session,最终是依赖于cookie里面jsessionid实现的。
-
现在:前端有多个服务器(一个是给用户看的,一个是给内部人员用的,所以会产生两个jsessionid(不一致,所以会话跟踪计算就失效了),达不到用户登录一次就能访问其他页面的效果)
-
注意:后台管理和门户网站时两个页面,所以就算是token也不能共享
-
解决:登录成功后将自定义的一个token和登录用户发送到前台(并把token和user存到redis,设置30分钟的过期时间),前台接收到token就使用Localstorage(前台内置对象,生命周期是一直存储),存储起来。并通过axios把它存到请求头里面,每次访问后台的时候都在请求头里携带这个token。这样进行判断是否登录
-
注意:后台管理和门户网站时两个页面,所以就算是token也不能共享
-
2、用户登录成功后在后台生成token
/**
* 登录
*
* @param user
* @return
*/
@Override
public AjaxResult login(User user) {
/**
上面进行登录的判断(略过)
主要记录token的步骤
*/
//4.登录成功,那么就生成的令牌和登录信息存到redis,并返回给前台,前台进行存储(下次来访问的时候就就携带令牌,判断是否已经登录)
//使用uuid生成token,避免重复
String token = UUID.randomUUID().toString();
//存到redis,并设置30分钟过期时间
RedisUtils.INSTANCE.set(token, JSON.toJSONString(user),60*30 );
Map<String, Object> map = new HashMap<>();
map.put("uToken", token);
map.put("tokenUser", user);
//5、将随机数token和user都返回给前台
return new AjaxResult(true,"登录成功",map);
}
3、前台存储token(使用localStorage)
注意:后台管理和门户网站时两个页面,所以就算是token也不能共享并且要获取localStorage存储的token需要在当前服务器里获取
3.1 localStorage和sessionStorage的区别
localStorage和sessionStorage的区别:
他们都是前台的内置对象
sessionStorage:生命周期是窗口级别的,只要窗口关掉了,那么这里面存储的token就没了,
localStorage:生命周期是一直存储到的(所以用户退出的时候,需要手动来删除这里面的token。并且redis里面存储是有时间的,如果时间到了,就算是这浏览器里面还有,但是redis里面没有的话,也需要重新登录)
3.2 前台代码实现
//前台登录方法
subLogin(){
this.$http.post("/user/login",this.logForm).then((res) => {
//结构表达式,就是获取到后台登录成功后,返回的登录信息
let {success,msg,object}=res.data;
if(res.data.success){
//********* 主要就是通过这个存储localStorage
localStorage.setItem("uToken",object.uToken);
localStorage.setItem("tokenUser",object.tokenUser);
//********* 存储end***********
//登录成功后跳转到主界面
window.location.href = 'index.html';
}else {
alert(res.data.msg);
}
});
}
4、前端配置拦截器(用于每次访问时在请求头里面添加token)
Vue.prototype.$http=axios; //给axios配置原型(全局使用)
axios.defaults.baseURL='http://localhost:80/'; //给axios请求设置访问后台的前缀
//**************前台拦截器**************
//1 使用axios前置拦截器,让所有的请求都携带uToken
axios.interceptors.request.use(config=>{
//1.1 获取到浏览器里面一直存储的token,并将它放到
let uToken = localStorage.getItem("uToken");
if(uToken){
//1.2 注意:给请求头里面添加u-token(后台判断就是取的这个请求头)请求头,并把随机数的token值也设置进去
config.headers['u-token']=uToken;
}
//1.3 必须要返回这个,才能执行后面代码
return config;
},error => {
Promise.reject(error);
});
//**********
//2 使用axios设置后置拦截器,处理后台被拦截,没有登录的请求
axios.interceptors.response.use(result=>{
let data = result.data;
//只要前台被拦截的请求里面含这两个参数,那么就跳转到登录界面
if(!data.success && data.msg==="NoUser")
location.href = "login.html";
return result;
},error => {
Promise.reject(error);
});
5、后台拦截器(4个逻辑步骤)
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Arrays;
import java.util.List;
@Component
public class LoginInterceptor implements HandlerInterceptor {
//这个方法是在访问接口之前执行的,我们只需要在这里写验证登陆状态的业务逻辑,就可以在用户调用指定接口之前验证登陆状态了
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//不拦截路径(登录路径等等)
List<String> asList = Arrays.asList("/user/registered", "/user/login", "/fastDFS/**");
String uri = request.getRequestURI();
//1.设置放行路径
if(asList.contains(uri)){
return true;
}
//2.拿到请求头里面的token(如果是第一次登录,那么是没有请求头的)
String token = request.getHeader("u-token");
if(token==null){
response.setContentType("application/json; charset=utf-8");
//2.1 拦截请求并返回信息给前台 (前台后置拦截器就是根据这里面返回的json数据,来判读并跳转到登录界面)
response.getWriter().print("{\"success\":false,\"msg\":\"NoUser\"}");
return false;
}
//3、如果有token,那么就根据这个token从redis查询登录用户信息,如果redis里面还没过期,那么就正常放行,没有就进行拦截,并返回信息,叫他重新登录
String tokenUser = RedisUtils.INSTANCE.get(token);
if(tokenUser==null){
response.setContentType("application/json; charset=utf-8");
response.getWriter().print("{\"success\":false,\"msg\":\"NoUser\"}");
return false;
}
//4.如果没有过期,那么就重新将token和登录用户信息存到redis
RedisUtils.INSTANCE.set(token, tokenUser, 60*30);
return true;
}
}
6、注册后台拦截器
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.util.Arrays;
import java.util.List;
@Configuration
public class WebConfigurer implements WebMvcConfigurer {
@Autowired
private LoginInterceptor loginInterceptor;
// 这个方法用来注册拦截器,我们自己写好的拦截器需要通过这里添加注册才能生效
@Override
public void addInterceptors(InterceptorRegistry registry) {
List<String> asList = Arrays.asList("/user/registered", "/user/login", "/fastDFS/**","/verifycode/**");
registry.addInterceptor(loginInterceptor).excludePathPatterns(asList);
}
}
7、这里面要使用到的Redis工具类
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import redis.clients.jedis.JedisPoolConfig;
import java.io.IOException;
import java.util.Properties;
/**
* 获取连接池对象
*/
public enum RedisUtils {
INSTANCE;
static JedisPool jedisPool = null;
static {
//1 创建连接池配置对象
JedisPoolConfig config = new JedisPoolConfig();
//2 进行配置-四个配置
config.setMaxIdle(1);//最小连接数
config.setMaxTotal(11);//最大连接数
config.setMaxWaitMillis(10 * 1000L);//最长等待时间
config.setTestOnBorrow(true);//测试连接时是否畅通
//3 通过配置对象创建连接池对象
Properties properties = null;
try {
properties = new Properties();
properties.load(RedisUtils.class.getClassLoader().getResourceAsStream("redis.properties"));
} catch (IOException e) {
e.printStackTrace();
}
String host = properties.getProperty("redis.host");
String port = properties.getProperty("redis.port");
String password = properties.getProperty("redis.password");
String timeout = properties.getProperty("redis.timeout");
System.out.println(host);
System.out.println(port);
System.out.println(password);
System.out.println(timeout);
jedisPool = new JedisPool(config, host, Integer.valueOf(port),Integer.valueOf(timeout), password);
}
//获取连接
public Jedis getSource() {
return jedisPool.getResource();
}
//关闭资源
public void closeSource(Jedis jedis) {
if (jedis != null) {
jedis.close();
}
}
/**
* 设置字符值
*
* @param key
* @param
*/
public void del(String key) {
Jedis jedis = getSource();
jedis.del(key);
closeSource(jedis);
}
/**
* 设置字符值
*
* @param key
* @param value
*/
public void set(String key, String value) {
Jedis jedis = getSource();
jedis.set(key, value);
closeSource(jedis);
}
/**
* 设置
* @param key
* @param value
*/
public void set(byte[] key, byte[] value) {
Jedis jedis = getSource();
jedis.set(key, value);
closeSource(jedis);
}
/**
*
* @param key
* @return
*/
public byte[] get(byte[] key) {
Jedis jedis = getSource();
try {
return jedis.get(key);
} catch (Exception e) {
e.printStackTrace();
} finally {
closeSource(jedis);
}
return null;
}
/**
* 设置字符值
*
* @param key
*/
public String get(String key) {
Jedis jedis = getSource();
try {
return jedis.get(key);
} catch (Exception e) {
e.printStackTrace();
} finally {
closeSource(jedis);
}
return null;
}
public void set(String key, String value, Integer time) {
Jedis jedis = getSource();
jedis.setex(key,time,value);
closeSource(jedis);
}
}