springboot + vue实现token登录拦截器

2021-11-01 14:03:44 阅读：189 来源： 互联网

标签：拦截器 return springboot token new password public String

一.后端

后端目录：

1.pom依赖需引入jwt

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.0</version>
</dependency>

2.token工具类，用来生成token以及校验token

public class TokenUtil {
    public static void main(String[] args) {
        User u = new User("admin","123");
        System.out.println(sign(u));
    }
    private static final long EXPIRE_TIME = 10*60*60*1000;
    private static final String PRIVATE_KEY = "abcde";  //密钥

    /**
     * 签名生成
     * @param user
     * @return
     */
    public static String sign(User user){
        String token = null;
        Map<String,Object> header = new HashMap<>();
        header.put("typ","JWT");
        header.put("alg","HS256");
        Map<String,Object> claims = new HashMap<>();
        //自定义有效载荷部分
        claims.put("account",user.getUserId());
        token = Jwts.builder()
                //发证人
                .setIssuer("auth")
                //Jwt头
                .setHeader(header)
                //有效载荷
                .setClaims(claims)
                //设定签发时间
                .setIssuedAt(new Date())
                //设定过期时间
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE_TIME))
                //使用HS256算法签名，PRIVATE_KEY为签名密钥
                .signWith(SignatureAlgorithm.HS256,PRIVATE_KEY)
                .compact();
        return token;
    }

    /**
     * 验证 token信息 是否正确
     * @param token 被解析 JWT
     * @return 是否正确
     */
    public static boolean verify(String token){
        //获取签名密钥
        //String key = userEntity.getUserPassword();
        //获取DefaultJwtParser
        try{
            Jwts.parser()
                    //设置 密钥
                    .setSigningKey(PRIVATE_KEY)
                    //设置需要解析的 token
                    .parseClaimsJws(token).getBody();
            return true;
        }catch (Exception e){
            return false;
        }
    }
}

3.TokenInterceptor 拦截器

@Component
public class TokenInterceptor extends HandlerInterceptorAdapter {

    // 重写 前置拦截方法
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            System.out.println("OPTIONS请求，放行");
            return true;
        }
        // 1、从请求头中获取token
        String token = request.getHeader("token");
        System.out.println(token);
        // 2、判断 token 是否存在
        if (token == null || "".equals(token)) {
            System.out.println("未登录");
            return false;
        }

        // 3、解析token
        if(!TokenUtil.verify(token)){
            return false;
        }

        return true;
    }
}

4.WebMvcConfig 注册拦截器

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    // 注入 token 拦截器
    @Autowired
    private TokenInterceptor interceptor;

    /**
     * 重写添加拦截器
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 添加自定义拦截器，并拦截对应 url"
        registry.addInterceptor(interceptor).addPathPatterns("/**").excludePathPatterns("/login");
    }
}

5.User实体类

public class User {
    private String userId;
    private String password;

    public User(String id,String word){
        this.userId = id;
        this.password = word;
    }
    public String getUserId() {
        return userId;
    }

    public void setUserId(String userId) {
        this.userId = userId;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

6.controller接口

@CrossOrigin
@RestController
public class UserController{
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public String login(@RequestBody Map<String,String> para) throws JsonProcessingException {
        String username=para.get("username");
        String password=para.get("password");
        String token= TokenUtil.sign(new User(username,password));
        HashMap<String,Object> hs=new HashMap<>();
        hs.put("token",token);
        ObjectMapper objectMapper=new ObjectMapper();
        return objectMapper.writeValueAsString(hs);
    }

    @RequestMapping(value = "/demo",method = RequestMethod.POST)
    public String hello(){
        System.out.println("sdhfkhsdf");
        return "Nihao ";
    }   
}

二.前端

前端目录：one.vue页面是多余的不用管

1.登录页面

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" >

<el-form-item label-width="300px" >

</el-form-item>

<el-form-item label="账号:" label-width="50px" prop="pass">

<el-input clearable name="name" type="username" v-model.trim="ruleForm.pass" autocomplete="off" placeholder="请输入账号" style="width: 250px"></el-input>

</el-form-item>

<el-form-item label="密码:" label-width="50px" prop="checkPass">

<el-input clearable name="word" type="password" v-model.trim="ruleForm.checkPass" autocomplete="off" placeholder="请输入密码" style="width: 250px"></el-input>

</el-form-item>

<el-form-item label-width="95px">

<el-button type="primary" @click="handleSubmit">登录</el-button>

</el-form-item>

</el-form>

</div>

</template>

export default {

data () {

var validatePass = (rule, value, callback) => {

if (value === '') {

callback(new Error('请输入账号'))

}

var validatePass2 = (rule, value, callback) => {

if (value === '') {

callback(new Error('请输入密码'))

}

return {

ruleForm: {

pass: '',

checkPass: ''

userToken: '',

userid: '',

userword: '',

rules: {

pass: [

{ validator: validatePass, trigger: 'blur' }

checkPass: [

{ validator: validatePass2, trigger: 'blur' }

]

}

methods: {

handleSubmit () {

let params = {

'username': this.ruleForm.pass,

'password': this.ruleForm.checkPass

}

this.$axios.post('http://localhost:8080/login', params).then(res => {

// 请求成功

console.log(res.data)

this.userToken = res.data.token

// 将用户token保存

alert(this.userToken)

localStorage.setItem('token', this.userToken)

this.$router.push('/main')

}).catch(() => {

// 请求失败，

this.$Message.error('登录失败！请检查登录信息是否正确！')

})

}

</script>

.login{

position: absolute;/绝对定位/

width: 300px;

height: 200px;

text-align: center;/(让div中的内容居中)/

top: 50%;

left: 50%;

margin-top: -200px;

margin-left: -150px;

}

</style>

2.登录成功后的main页面（为了测试，就只写了一个按钮，登录成功后，跳转到这个页面，再点击按钮返回一条后端信息）

<el-button type="primary" @click="mount">登录</el-button>

</div>

</template>

export default {

methods: {

mount () {

alert(localStorage.getItem('token'))

this.$axios.post('http://localhost:8080/demo').then(res => {

// 请求成功

alert(res.data)

}).catch(() => {

// 请求失败，

alert(222)

})

}

</script>

3.main.js中加入全局配置请求头代码

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import axios from 'axios'

import 'element-ui/lib/theme-chalk/index.css'

import Vuex from 'vuex'

Vue.use(Vuex)

Vue.use(ElementUI)

Vue.prototype.$axios = axios

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

axios.interceptors.request.use(function (config) {

// 为请求头添加Authorization字段为服务端返回的token

config.headers.token = localStorage.getItem('token')

// return config是固定用法必须有返回值

return config

})

三.测试

前端页面路由：（one这个是多余的不用管，到时候直接输入8081/login页面就行）

打开url：http://localhost:8081/#/login

随便输入账号和密码就行，为了测试，后端没有去从数据库拿数据，登录后跳转到main页面

点击登录按钮：

成功！

标签：拦截器,return,springboot,token,new,password,public,String
来源： https://www.cnblogs.com/tian-yu/p/15493273.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

springboot + vue实现token登录拦截器

一.后端

后端目录：

1.pom依赖需引入jwt

2.token工具类，用来生成token以及校验token

3.TokenInterceptor 拦截器

4.WebMvcConfig 注册拦截器

5.User实体类

6.controller接口

二.前端

前端目录：one.vue页面是多余的 不用管

1.登录页面

2.登录成功后的main页面（为了测试，就只写了一个按钮，登录成功后，跳转到这个页面，再点击按钮返回一条后端信息）

3.main.js中加入全局配置请求头代码

三.测试

前端页面路由：（one这个是多余的不用管，到时候直接输入8081/login页面就行）

打开url：http://localhost:8081/#/login

前端目录：one.vue页面是多余的不用管