目录
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的正确存在
一、登陆时通过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<String> 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
<template>
<div class="login">
<el-card class="box-card">
<div class="clearfix">
<span>大数据专业实验室</span>
</div>
<div>
<el-tabs stretch>
<el-tab-pane label="登陆">
<el-form :model="loginForm" status-icon :rules="rules" label-width="80px" ref="loginForm">
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitLoginForm()">登陆</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册">
<el-form :model="registerForm" status-icon :rules="rules" label-width="80px" ref="loginForm">
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="configurePassword">
<el-input type="password" v-model="registerForm.configurePassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitRegisterForm()">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script>
import axios from 'axios';
import { mapMutations } from 'vuex';//引入vuex下的方法
export default {
data() {
var validateUsername = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入用户名"));
} else if (value.length < 4) {
callback(new Error("长度不够"));
} else {
callback();
}
};
var validatePassword = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
callback();
}
};
var validateConfigurePassword = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码")); //callback的作用是显示那个图标的
} else if (value !== this.registerForm.password) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
}
return {
loginForm: {
username: "",
password: "",
},
registerForm: {
username: "",
password: "",
configurePassword: ""
},
rules: {
username: [
{
validator: validateUsername,
trigger: "blur",
},
],
password: [
{
validator: validatePassword,
trigger: "blur",
},
],
configurePassword: [
{
validator: validateConfigurePassword,
trigger: "blur",
}
]
},
};
},
methods: {
//映射mapMutations 辅助函数映射 Vuex mutations
// - 让组件可以直接调用 Vuex 中的 mutations 方法
...mapMutations(['setToken']),
submitLoginForm() {
let self = this //在回调函数中调用this会创建与this对象的新绑定,而不是正则函数表达式中的 Vue 对象。
var url = "http://localhost:8081/login?username=" + this.loginForm.username + "&password=" + this.loginForm.password
axios.get(url).then(function (response) { //匿名回调函数,导致回调函数中的 this 不再指向 Vue 实例
var jsonObject = response.data;
var jsonString = JSON.stringify(jsonObject)
if (jsonString !== "false") {
window.localStorage.setItem("token", jsonString);
self.setToken({ token: jsonString });
self.$router.push('/product')
} else {
alert("账号或密码错误！")
}
})
},
submitRegisterForm() {
var url = "http://127.0.0.1:8081/register?username=" + this.registerForm.username + "&password=" + this.registerForm.password
axios.get(url).then(function (response) {
var jsonObject = response.data;
var jsonString = JSON.stringify(jsonObject)
if (jsonString === "true") {
alert("注册成功！")
} else {
alert("该用户已注册！")
}
})
},
},
name: "LoginPage",
};
</script>
<style>
.login {
width: 1200px;
margin: 0 auto;
}
.box-card {
width: 500px;
margin: 100px auto;
}
</style>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界面
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
