vue springboot实现token登录以及访问验证

╰半夏微凉° 2022-11-26 12:00 189阅读 0赞

## vue springboot实现token登录以及访问验证 ##

***后端代码：***  
**pom依赖：**

<dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.71</version>
            </dependency>
            
            <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>

**TokenUtil：**

package com.example.demo.jwt;
    
    import com.auth0.jwt.JWT;
    import com.auth0.jwt.JWTVerifier;
    import com.auth0.jwt.algorithms.Algorithm;
    import com.auth0.jwt.interfaces.DecodedJWT;
    import com.example.demo.entity.User;
    
    import java.util.Date;
    
    public class TokenUtil { 
    
        private static final long EXPIRE_TIME= 15*60*1000;
        private static final String TOKEN_SECRET="tokenqkj";  //密钥盐
    
    
        /** * 签名生成 * @param user * @return */
        public static String sign(User user){ 
    
            String token = null;
            try { 
                Date expiresAt = new Date(System.currentTimeMillis() + EXPIRE_TIME);
                token = JWT.create()
                        .withIssuer("auth0")
                        .withClaim("username", user.getUsername())
                        .withExpiresAt(expiresAt)
                        // 使用了HMAC256加密算法。
                        .sign(Algorithm.HMAC256(TOKEN_SECRET));
            } catch (Exception e){ 
                e.printStackTrace();
            }
            return token;
        }
    
        /** * 签名验证 * @param token * @return */
        public static boolean verify(String token){ 
    
    
            try { 
                JWTVerifier verifier = JWT.require(Algorithm.HMAC256(TOKEN_SECRET)).withIssuer("auth0").build();
                DecodedJWT jwt = verifier.verify(token);
                System.out.println("认证通过：");
                System.out.println("issuer: " + jwt.getIssuer());
                System.out.println("username: " + jwt.getClaim("username").asString());
                System.out.println("过期时间： " + jwt.getExpiresAt());
                return true;
            } catch (Exception e){ 
                return false;
            }
        }
    }

**TokenInterceptor：token拦截器**

package com.example.demo.jwt;
    
    import com.alibaba.fastjson.JSONObject;
    import org.springframework.stereotype.Component;
    import org.springframework.web.servlet.HandlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.PrintWriter;
    
    @Component
    public class TokenInterceptor implements HandlerInterceptor { 
    
    
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object handler)throws Exception{ 
    
            if(request.getMethod().equals("OPTIONS")){ 
                response.setStatus(HttpServletResponse.SC_OK);
                return true;
            }
    
            response.setCharacterEncoding("utf-8");
    
            String token = request.getHeader("token");
            if(token != null){ 
                boolean result = TokenUtil.verify(token);
                if(result){ 
                    System.out.println("通过拦截器");
                    return true;
                }
            }
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
            PrintWriter out = null;
            try{ 
                JSONObject json = new JSONObject();
                json.put("success","false");
                json.put("msg","认证失败，未通过拦截器");
                json.put("code","50000");
                response.getWriter().append(json.toJSONString());
                System.out.println("认证失败，未通过拦截器");
                // response.getWriter().write("50000");
            }catch (Exception e){ 
                e.printStackTrace();
                response.sendError(500);
                return false;
            }
    
            return false;
    
        }
    }

***IntercepterConfig：入口拦截***

package com.example.demo.jwt;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** * 拦截器配置 */
    @Configuration
    public class IntercepterConfig implements WebMvcConfigurer { 
    
        private TokenInterceptor tokenInterceptor;
    
        //构造方法
        public IntercepterConfig(TokenInterceptor tokenInterceptor){ 
            this.tokenInterceptor = tokenInterceptor;
        }
    
        @Override
        public void addInterceptors(InterceptorRegistry registry){ 
            List<String> excludePath = new ArrayList<>();
            excludePath.add("/user_register"); //注册
            excludePath.add("/login"); //登录
            excludePath.add("/logout"); //登出
            excludePath.add("/static/**");  //静态资源
            excludePath.add("/swagger-ui.html/**");  //静态资源
            excludePath.add("/assets/**");  //静态资源
    
            registry.addInterceptor(tokenInterceptor)
                    .addPathPatterns("/**")
                    .excludePathPatterns(excludePath);
            WebMvcConfigurer.super.addInterceptors(registry);
    
        }
    
        /** * 跨域支持 * * @param registry */
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowCredentials(true)
                    .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH", "OPTIONS", "HEAD")
                    .maxAge(3600 * 24);
        }
    
    
    }

***现在是登录接口，当然，记得配置跨域：*  
CorsConfig**

package com.example.demo.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    @Configuration
    public class CorsConfig { 
        @Bean
        public CorsFilter corsFilter() { 
            final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
            final CorsConfiguration corsConfiguration = new CorsConfiguration();
            /*是否允许请求带有验证信息*/
            corsConfiguration.setAllowCredentials(true);
            /*允许访问的客户端域名*/
            corsConfiguration.addAllowedOrigin("*");
            /*允许服务端访问的客户端请求头*/
            corsConfiguration.addAllowedHeader("*");
            /*允许访问的方法名,GET POST等*/
            corsConfiguration.addAllowedMethod("*");
            urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsFilter(urlBasedCorsConfigurationSource);
        }
    }

登录接口：（我这里用的是mybatisplus）

@PostMapping("/login")
        public ResultMap toLogin(HttpServletResponse response,@RequestBody JSONObject obj){ 
            System.out.println(obj);
    // String scope= JSONObject.parseObject(obj).getJSONObject("data").getString("scope");
            QueryWrapper<User> wrapper=new QueryWrapper<>();
            obj.getString("password");
            wrapper
                    .eq("username",obj.getString("username"))
                    .eq("password",obj.getString("password"));
    
            String token=null;
            User user = userService.getOne(wrapper);
            if(user!=null){ 
                 token = TokenUtil.sign(user);
            }
            // 将token放在响应头
    // response.setHeader(JwtTokenUtil.AUTH_HEADER_KEY, JwtTokenUtil.TOKEN_PREFIX + token);
            if(token != null){ 
    
                return resultMap.success().code(200).message(token);
            }
            return  resultMap.success().code(400).message("登录失败，请重试");
        }

**现在是vue：（首先安装vuex，我主要是写后端的，感觉这个是个全局变量）  
src目录下创建store文件夹，store下 index.js：**

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    const store = new Vuex.Store({ 
        state: { 
            token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
          },
          mutations: { 
            setToken (state,token) { 
              state.token =token;
              localStorage.setItem("token",token.token);     //存储token
            },
            delToken (state) { 
              state.token = '';
              localStorage.removeItem("token");    //删除token
            }
        }    
    });
    
    export default store;

***然后登录业务（我这里加了element ui 所以看着有点乱，表单验证可以不看，记得在上面引入vuex下的方法，因为main.js没有引入）***

***然后添加路由守卫：***

//挂载路由导航守卫
    router.beforeEach((to,from,next)=>{ 
      //to 将要访问的路径
      //from 代表从哪个路径而来
      //next() 代表放行 next('xxx') 强制放行的xxx的路径
      if(to.path==='/'||to.path==='/login'){ 
        next();
      }else{ 
        const tokenStr=window.localStorage.getItem('token')
        if(!tokenStr){ 
         return next('/login')
        }
        next()
      }
    })

最后main.js中添加请求拦截器：（这里的config.headers.token中的token是后台定义的要从请求头中那的那个名:\{String token = request.getHeader(“token”);\}中的token）

// 添加请求拦截器，在请求头中加token
    axios.interceptors.request.use(
      config => { 
        if (localStorage.getItem('token')) { 
          config.headers.token = localStorage.getItem('token');
        }
        return config;
      },
      error => { 
        return Promise.reject(error);
      });

***现在运行：可以看到localStorage中没有token***![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center]  
现在登录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 1]  
这里登录成功以后存储了token，然后看看后台  
![在这里插入图片描述][20200812114654116.png_pic_center]  
后台也通过验证，现在试试把token清除然后刷新页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 2]  
刷新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 3]  
重定向到登录页，大功告成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/359a09eac8be4350b85a7c2de344eb49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/0acf9e02802c47ffb555d7112726b024.png
[20200812114654116.png_pic_center]: /images/20221124/f82db5bf92a24e5bab405a0244490c10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/9089ad5abb524750bb91280bac1a4629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlbGxvd29ybGRfcGFuZw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/8cdbe10d0c994eda8358d72cd831195c.png