Springboot+vue中实现用户登陆时通过token验证的demo
目录
一、登陆时通过token验证的大致思路
二、后端部分
1.登陆接口：通过MySql验证用户名和密码是否正确，若正确调用token生成类返回生成的token，若错误则返回false
2.通过JWT加密生成token，通过JWT进行token的正确性验证
3.Spring MVC拦截器，对被拦截的接口请求进行token验证，只有在提供一个有效的token时才能通过验证,否则给出认证失败的响应。
4.Spring MVC入口拦截，设置哪些接口需要拦截或不拦截，保护后端接口，防止未经授权的访问
三、前端部分
1.store/index.js:设置setToken和delToken方法 保证token的正确存在
2.路由导航守卫：router/index.js 对除了login的其他页面进行拦截，检查localStorage中是否存在token（只判断存在性 配合后端接口的token校验来完善整个的token验证）。
3.登陆注册页面：Views/Login.vue
4.main.js
四、demo界面
一、登陆时通过token验证的大致思路
1、前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个 token
3、前端接收到token后存入LocalStorage
4、访问页面时验证LocalStorage中的token
二、后端部分
1.登陆接口：通过MySql验证用户名和密码是否正确，若正确调用token生成类返回生成的token，若错误则返回false
package com.example.vuedemo;
import com.example.vuedemo.Token.TokenGenerate;
import jdk.nashorn.internal.parser.Token;
import mysql.AddRegister;
import mysql.CheckRegister;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Objects;
@RestController
@CrossOrigin //加上CrossOrigin可解决跨域问题
public class vueControll {
String token;
@RequestMapping("/login")
public String tologin(@RequestParam("username") String username,@RequestParam("password") String password) throws SQLException {
ResultSet resultRegister = CheckRegister.MyAccount(username);
if(resultRegister.next()) {
if(username.equals(resultRegister.getString("username"))&&password.equals(resultRegister.getString("password"))) {
token = new TokenGenerate().generateToken(username);
return token;
}
}
return "false";
}
}
2.通过JWT加密生成token，通过JWT进行token的正确性验证
package com.example.vuedemo.Token;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import java.util.Date;
public class TokenGenerate {
private static final long EXPIRE_TIME= 15*60*1000;
private static final String TOKEN_SECRET="tokenqkj"; //密钥盐
public String generateToken(String username){
String token = null;
try{
Date expiresAt = new Date(System.currentTimeMillis() + EXPIRE_TIME);
token = JWT.create()
.withIssuer("auth0")
.withClaim("username", username)
.withExpiresAt(expiresAt)
.sign(Algorithm.HMAC256(TOKEN_SECRET));
}catch (Exception e){
e.printStackTrace();
}
return token;
}
/**
* 签名验证
* @param token
* @return
*/
public static boolean verify(String token){
System.out.println("执行了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){
System.out.println("没通过");
return false;
}
}
}
3.Spring MVC拦截器，对被拦截的接口请求进行token验证，只有在提供一个有效的token时才能通过验证,否则给出认证失败的响应。
package com.example.vuedemo.Token;
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;
//token拦截器,对拦截下的接口检查其的token是否符合只有
// 在提供一个有效的token时才能通过验证,否则给出认证失败的响应。
@Component
public class TokenInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception{
//Axios 发起跨域请求前,浏览器也会首先发起 OPTIONS 预检请求。检查服务器是否允许跨域访问。
if(request.getMethod().equals("OPTIONS")){
response.setStatus(HttpServletResponse.SC_OK);
System.out.println("允许跨域访问");
return true;
}
response.setCharacterEncoding("utf-8");
String token = request.getHeader("token");
if(token != null){
boolean result = TokenGenerate.verify(token);
if(result){
System.out.println("通过拦截器");
return true;
}
}
response.setCharacterEncoding("UTF-8");
PrintWriter out = null;
response.getWriter().write("认证失败,错误码:50000");
return false;
}
}
4.Spring MVC入口拦截，设置哪些接口需要拦截或不拦截，保护后端接口，防止未经授权的访问
package com.example.vuedemo.Token;
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;
//入口拦截，设置哪些接口需要拦截或不拦截（保护后端接口 防止未经授权的访问）
//只需要拦截本身就不会携带token的接口（例如登陆注册）
//因为登陆后网页的请求头就会携带token，此时我们需要进行token的验证，防止在未登陆时就可以进行其他操作
@Configuration
public class IntercepterConfig implements WebMvcConfigurer {
private final TokenInterceptor tokenInterceptor;
// 构造方法
public IntercepterConfig(TokenInterceptor tokenInterceptor) {
this.tokenInterceptor = tokenInterceptor;
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
//excludePathPatterns用来配置不需要拦截的接口（或者相当于功能）
List excludePath = new ArrayList<>();//List用来保存所有不需要拦截的路径
excludePath.add("/register"); //注册
excludePath.add("/login"); //登录
//在登陆之后的网页中已经携带token，所以只需要放行登陆注册接口，
//若放行其他接口，那么就相当于不需要登陆就可进行接口的使用
registry.addInterceptor(tokenInterceptor)//添加名为tokenInterceptor的拦截器
.addPathPatterns("/**") //指定拦截所有路径
.excludePathPatterns(excludePath);//排除不需要拦截的路径
WebMvcConfigurer.super.addInterceptors(registry);
}
}
三、前端部分
1.store/index.js:设置setToken和delToken方法 保证token的正确存在
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//定义一个state存储token信息
token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
},
mutations: {
//登录后通过setToken存入token token保存在state和localStorage中
setToken (state,token) {
state.token =token;
localStorage.setItem("token",token.token); //存储token
},
//登出后通过delToken清除token
delToken (state) {
state.token = '';
localStorage.removeItem("token"); //删除token
}
}
});
export default store;
2.路由导航守卫：router/index.js 对除了login的其他页面进行拦截，检查localStorage中是否存在token（只判断存在性 配合后端接口的token校验来完善整个的token验证）。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../views/Home.vue"
import Login from "../views/Login.vue"
import Product from "../views/Product.vue"
Vue.use(VueRouter)
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/login",
name: "Login",
component: Login
},
{
path: "/product",
name: "Product",
component: Product
}
]
const router = new VueRouter({
mode:"history",
routes
})
router.beforeEach((to, from, next) => {
//to 将要访问的路径
//from 代表从哪个路径而来
//next() 代表放行 next('xxx') 强制放行的xxx的路径
if(to.path==='/login'){
next();
}else{
const tokenStr = window.localStorage.getItem('token');
console.log(tokenStr);
if(!tokenStr){
return next('/login')
}
next();
}
})
export default router
3.登陆注册页面：Views/Login.vue
大数据专业实验室
登陆
注册
4.main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import "./css/common.css"
Vue.prototype.$http = axios
Vue.config.productionTip = false
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 添加请求拦截器，在请求头中加token
//使用 axios 的请求拦截器来实现在请求头中自动带上 token 的功能:
axios.interceptors.request.use(
config => {
if (localStorage.getItem('token')) {
config.headers.token = localStorage.getItem('token');
}
return config;
},
error => {
return Promise.reject(error);
});
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
四、demo界面
