毕业设计1-跨域问题，登录逻辑（token）

最新推荐文章于 2024-06-15 15:47:47 发布

Wonder-King

最新推荐文章于 2024-06-15 15:47:47 发布

阅读量397

点赞数 2

分类专栏：网站设计文章标签：前后端分离 vue springboot

本文链接：https://blog.csdn.net/qq_42391248/article/details/112761914

版权

网站设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我的毕业设计采用vue+springboot前后端分离架构，和以前写的JavaWeb项目有很多不同的地方，也遇到了很多的问题。

问题一：跨域问题

因为前端的端口号和后端的端口号不一样，就产生了跨域的问题。

前端我用axios发送请求

import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8090'
Vue.prototype.$http = axios

后端有很多解决跨域的方法，我使用的是@CrossOrigin注解

@CrossOrigin(origins = "http://localhost:8090", maxAge = 3600)
@MapperScan("com.wdq.onebook.dao")
@SpringBootApplication
public class oneBookApplication {

	public static void main(String[] args) {
		SpringApplication.run(oneBookApplication.class, args);
	}

}

问题二：获取用户名

由于是前后端分离的项目，如何知道前端发送请求的用户是谁呢？

如果每次请求都向后端发送用户的信息，后端还要去数据库查询该用户的账号密码，核对是否正确，过于麻烦。

所以我选择用token来解决这个问题。

流程：

用户登录，前端发送请求到后端
后端验证成功后，根据用户名和密码生成token令牌发送给前端
前端把token保存在localStorage中，以后该用户每次发送请求都在header里面放上token
后端从请求中拿到token，就解析出了用户的用户名和密码

后端的token加密解密：

public class TokenManager {
    //token有效时长
    private long tokenEcpiration = 24*60*60*1000;
    //编码秘钥
    private String tokenSignKey = "wdq_onebook_";
    //1 使用jwt根据用户名生成token
    public String createToken(String username) {
        String token = Jwts.builder().setSubject(username)
                .setExpiration(new Date(System.currentTimeMillis()+tokenEcpiration))
                .signWith(SignatureAlgorithm.HS512, tokenSignKey).compressWith(CompressionCodecs.GZIP).compact();
        return token;
    }
    //2 根据token字符串得到用户信息
    public String getUserInfoFromToken(String token) {
        String userinfo = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token).getBody().getSubject();
        return userinfo;
    }
}

前端保存token到localStorage

//保存
localStorage.setItem('token', JSON.stringify(res.token))

//将token获取到，并全局设置到header里面
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8090'
Vue.prototype.$http = axios
// 配置header保存token
axios.defaults.headers.common['token'] = JSON.parse(localStorage.getItem('token'))