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);
    }
}
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue