Springboot+Vue 集成JWT

整体思路是这样，在首次登录成功的时候将用户id放在jwt中的payload中，利用JWT工具类生成相应的token，然后传给前端，前端将获得的token首先放在localStorage中，然后在前端设置请求拦截器，将localStorage中的token放在请求头中，这样就可以在每次访问的时候把token传递给后端，然后在后端设置拦截器，获得的请求头中的token数据，根据不同的情况抛出不同的异常，没有异常放行。

拦截器代码如下

public class MyFilter implements HandlerInterceptor {
    @Autowired
    LoginMapper loginMapper;
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token=request.getHeader("token");
        if(!(handler instanceof HandlerMethod))
            return true;
        if(token==null)
            throw  new Exception("无token,请重新登陆");
        try {
            DecodedJWT decodedJWT = JwtUtil.decodeToken(token);
            Integer userId = decodedJWT.getClaim("userId").asInt();
            System.out.println(userId);
            Login login = loginMapper.selectById(userId);
            if(login==null)
                throw new Exception("用户不存在");
        }
        catch (Exception  e){
            throw new Exception("token验证失败");
        }

        return true;

    }
}

创建拦截器的配置类，这里使用@Bean注解进行配置，不能通过new 对象，因为Spring容器无法对new出来的对象进行管理，在拦截器中使用了Spring注解，如果new 对象，则无法生效。这里对拦截器和过滤器进行简单区别：

　　①拦截器是基于Java的反射机制的，而过滤器是基于函数回调。
　　②拦截器不依赖与servlet容器，过滤器依赖与servlet容器。
　　③拦截器只能对部分请求起作用，而过滤器则可以对几乎所有的请求起作用。
　　④拦截器可以访问spring容器上下文、值栈里的对象，而过滤器不能访问。
　　⑤在controller的生命周期中，拦截器可以多次被调用，而过滤器只能在容器初始化时被调用一次。
　　⑥拦截器可以获取IOC容器中的各个bean，而过滤器就不行，这点很重要，在拦截器里注入一个service，可以调用业务逻辑。

代码如下，首先拦截所有路径，然后放行登录界面，获取验证码后端接口

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(myFilter())
                .addPathPatterns("/**")
                .excludePathPatterns("/login","/login/getcode");
    }
    @Bean
    public  MyFilter myFilter(){
        return new MyFilter();
    }
}

前端请求拦截器代码如下，其余的代码相对简单进行省略。

const request = axios.create({
    baseURL: 'http://localhost:8080',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

request.interceptors.request.use(config=>{
    config.headers['Content-Type']="application/json;charset=utf-8"
    let token=localStorage.getItem("userId")?localStorage.getItem("userId"):null
    if(token){
        config.headers['token']=token
    }
    return config
},error => {
    return Promise.reject(error)
})

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/143097.html

Springboot+Vue 集成JWT

相关推荐

发表回复

分享到: