前端Vue后端JavaWeb实现token简单登录校验

最新推荐文章于 2024-07-22 04:12:24 发布

轩辕秋风泪

最新推荐文章于 2024-07-22 04:12:24 发布

阅读量1.5k

点赞数 3

分类专栏： Vue学习我的Java学习文章标签： jwt vue

本文链接：https://blog.csdn.net/qq_45925974/article/details/112861993

版权

本文介绍了一个使用Vue前端和Java后端通过JWT token进行登录验证的工作室项目。前端利用Axios发送登录请求，后端校验并返回token，前端存储token并在后续请求中添加到请求头。后端通过过滤器对每个请求进行token检查。文章包含关键代码示例，并探讨了在axios与Ajax中处理token和json转换的差异。

摘要由CSDN通过智能技术生成

工作室项目里面需要实现登录校验，因为打算做的app，现在没学安卓，暂时用的vue做了个H5版的，所以用的是token进行登录校验，没有使用传统的cookie session

时间:2021-1-20

一、技术要点

前端：
1.Axios及拦截器
2.vue路由
后端：
1.token的使用（用的是jwt）
2.servlet及过滤器

二、流程

前端登录发送axios请求，
后端接收数据后核验,如果正确返回生成的token和用户的基本信息,否则返回401
前端接收token后存储在localstorage中，在之后的每一次请求中给请求头添加token
后端使用过滤器，对每一个请求检查token，正确则放行，不存在或错误则返回401

三、具体代码

1.axios发送登录请求

login.vue

前端登录代码
this.$qs.stringify(data) 将参数序列化成URL的形式，从而可以发送formData类型的数据
axios默认以play load的类型发送参数，

export default {
    data(){
        return {
        user:{
            userPhone:"",
            userPassward:""
            }
        }
    },
    methods:{
        login:function(){
            let data = {P
                userPhone:this.user.userPhone,
                userPassword:this.user.userPassward               
            };
            this.$axios.post('http://localhost/login',this.$qs.stringify(data))
            .then((res)=>{