Springboot+Vue实现用户登录Token权限验证

1.前后端分离实现token登录验证和状态保存

token可用于登录验证和权限管理。

大致步骤分为：

- 前端登录，post用户名和密码到后端。

- 后端验证用户名和密码，若通过，生成一个token返回给前端。

- 前端拿到token用vuex和localStorage管理，登录成功进入首页。

- 之后前端每一次权限操作如跳转路由，都需要判断是否存在token，若不存在，跳转至登录页。

- 前端之后的每一个对后端的请求都要在请求头上带上token，后端查看请求头是否有token，拿到token检查是否过期，返回对应状态给前端。

- 若token已过期，清除token信息，跳转至登录页。

前端功能设计：

​ (1)main.js主文件：添加路由前置守卫beforeEach拦截请求

//路由全局前置守卫
router.beforeEach((to,from,next) => {
  if(to.path === '/register' || to.path === '/login' || to.path === '/'){ //若是进入登录与注册页面 ==> pass
    next()
  }else{ 
    let userToken = localStorage.getItem('token');
    console.log("Token为:"+userToken); 
    if(userToken == null || userToken == ''){
      alert("无权限，请先登录!");
      return next('/login');
    }else{
      next();
    }
  }
}),

​ (2)Login页面：发送用户名与密码；接收后端生成的token并存入状态管理中localStorage

if(res.status == 1){
          localStorage.setItem("username",this.form.username); //将用户名存入缓存，TheHeader 用户名直接从缓存中取出
          this.userToken = res.token;
           // 将用户token保存到localStorage中  备注：先将token存入状态管理中，登陆成功跳转到首页要用到token进行验证
          this.CHANGE_LOGIN({ token : this.userToken });
          this.$router.push('/Info');
          this.$message({
            message: '登录成功',
            type: 'success'
          })

(3)在store状态管理中存储token：

const store = new VueX.Store({
    state: {
        HOST: `http://127.0.0.1:8888`,  // //歌手图片地址加载 ，因为库中存的是相对地址  如果不加http:// ，URL前面就会携带上vue的本地启动ip
        
        // 存储token
        Authorization: localStorage.getItem('token') ? localStorage.getItem('token') : ''
    },
    // 修改token，并将token存入localStorage
    export const CHANGE_LOGIN = (state, user) => {
        state.token = user.token;
        localStorage.setItem('token', user.token);
      };
 
})

(4) 在axios中添加请求拦截器:

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

后端功能设计：

​ pom.xml引入依赖:

<dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.18.2</version>
        </dependency>

​ LoginController（登录调用方法生成token签名）：

   		Admin admin = new Admin();
           admin.setName(name);
           admin.setPassword(password);
           String signToken = TokenUtil.sign(admin);//首次登录token签名
           jsonObject.put("token",signToken);
           return jsonObject;

​ TokenUtil（生成token与验证）:

package com.haiyang.utils;

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.haiyang.domain.Admin;
import java.util.Date;

public class TokenUtil {

    private static final long EXPIRE_TIME= 10*60*60*1000; //过期时间：10 hour
    private static final String TOKEN_SECRET="Haiyang";  //密钥盐

    /**
     * 签名生成
     * @param admin
     * @return
     */
    public static String sign(Admin admin){
        String token = null;
        try {
            Date expiresAt = new Date(System.currentTimeMillis() + EXPIRE_TIME);
            token = JWT.create()
                    .withIssuer("auth0")
                    .withClaim("username", admin.getName())
                    .withExpiresAt(expiresAt)
                    // 使用了HMAC256加密算法。
                    .sign(Algorithm.HMAC256(TOKEN_SECRET));
        } catch (Exception e){
            e.printStackTrace();
        }
        System.out.println(admin.getName()+"用户生成的Token为："+token);
        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("username: " + jwt.getClaim("username").asString());
            System.out.println("过期时间：      " + jwt.getExpiresAt());
            return true;
        } catch (Exception e){
            return false;
        }
    }

}

​ TokenInterceptor（拦截token）:

package com.haiyang.Interceptor;


import com.alibaba.fastjson.JSONObject;
import com.haiyang.utils.TokenUtil;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @version 1.0
 * @author:Haiyang
 * @date:2021/9/28
 */
@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"); //前端vue将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");
        try{
            JSONObject json = new JSONObject();
            json.put("msg","token verify fail");
            json.put("code","50000");
            response.getWriter().append(json.toJSONString());
            System.out.println("认证失败，未通过拦截器");

        }catch (Exception e){
            e.printStackTrace();
            response.sendError(500);
            return false;
        }
        return false;
    }
}

​ WebMVConfig配置:

package com.haiyang.config;

import com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter;
import com.alibaba.fastjson.support.spring.FastJsonJsonView;
import com.haiyang.Interceptor.TokenInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.scheduling.concurrent.ConcurrentTaskExecutor;
import org.springframework.web.servlet.config.annotation.AsyncSupportConfigurer;
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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许携带cookie参数
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }


    private TokenInterceptor tokenInterceptor;
    //构造方法
    public WebMvcConfig(TokenInterceptor tokenInterceptor){
        this.tokenInterceptor = tokenInterceptor;
    }

    @Override
    public void configureAsyncSupport(AsyncSupportConfigurer configurer){
        configurer.setTaskExecutor(new ConcurrentTaskExecutor(Executors.newFixedThreadPool(3)));
        configurer.setDefaultTimeout(30000);
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        List<String> excludePath = new ArrayList<>();
        //排除拦截，除了注册登录(此时还没token)，其他都拦截
        excludePath.add("/admin/register");  //登录
        excludePath.add("/admin/login");     //注册
        excludePath.add("/img/**");  //静态资源
        excludePath.add("/song/**");  //静态资源

        registry.addInterceptor(tokenInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns(excludePath);
        WebMvcConfigurer.super.addInterceptors(registry);
    }

}