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界面

Springboot+vue中实现用户登陆时通过token验证的demo_第1张图片

Springboot+vue中实现用户登陆时通过token验证的demo_第2张图片

你可能感兴趣的:(vue.js,前端,javascript,spring,boot,intellij-idea,后端,mysql)