需要将 token字符串 用户信息 存入的Cookie中,因此需要引入 js-cookie 。前端采用 axios 发送请求,所以还需要引入 axios

1、封装axios

创建一个 request.js 文件,用来封装 axios

import axios from 'axios';  // 引入axios
import cookie from 'js-cookie';  // 引入js-cookie
// 创建axios实例
const service = axios.create({
	baseURL:'http://localhost:9000',   // 请求地址,可以使用nginx代理
	timeout:20000					   // 请求超时时间
});
// 配置request拦截器
service.interceptors.request.use(
	config => {
	    // 如果Cookie中存在这个token,就在header中设置这个token
	    // 这样token就可以跨域转发
		if(cookie.get('user_token')){
			config.headers['token'] = cookie.get('user_token');
		return config;
	err => {  // 出错调用
		return Promise.reject(err);
export default service;

2、定制API - login.js

定制登录的方法。

import request from '@/utils/request';  // 引入request.js
export default {
     * 登录的方法
     * @param userInfo 用户登录信息
	submitLogin(userInfo){
		return request({
			// 登录的请求地址,完整即http://localhost:9000/user/login
			url:'/user/login',  
			method:'post',   // 请求方式
			data:userInfo    // 请求信息
		});

3、完成登录 - 基于Vue和Axios发送请求

import cookie from 'js-cookie'
import loginApi from '@/api/login'
export default{
	data(){
		return {
			user:{
				mobile:'',    // 手机/账号
				password:'',  // 密码
			loginInfo:{},     // 登录用户信息
	methods:{
		 * 登录按钮调用的方法
		submitLogin(){
			 * 调用登录API
			loginApi.submitLogin(this.user)
				.then(response => {
				    // 将服务端传过来的token字符串存入cookie
					cookie.set('user_token',response.data.data.token,{domain:'localhsot'});
					// 这里就可以调用方法去获取用户信息并存入Cookie了
					// 方法就不再定义了,直接使用,定义方式与前面一致
					// 因为在request.js中制定了拦截器,会检查token是否存在,存在就跟着header信息一起被传走
					loginApi.getLoginUserInfo()
						.then(response => {
							this.loginInfo = response.data.data.userInfo;
							// 将获取到的用户信息存入到cookie中,其他页面从cookie中取
							cookie.set('user_info',this.loginInfo,{domain:'localhost'});
							// 跳转到首页 - 也可以使用路由跳转
							// 首页就可以从cookie中获取了
							window.location.href = "/";

4、登录成功,信息获取

在cookie中获取信息,通过JSON.parse方法将其转换为JSON对象。

1、要使用JWT,需要引入JWT的依赖

<!-- JWT-->
<dependency>
	<groupId>io.jsonwebtoken</groupId>
	<artifactId>jjwt</artifactId>
	<version>0.7.0</version>
</dependency>

2、创建JWT帮助类

public class JwtUtils {
    // 常量
    public static final long EXPIRE = 1000 * 60 * 60 * 24; // token过期时间
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO"; // 秘钥
    // 生成token字符串的方法
    public static String getJwtToken(String id, String nickname){
        String JwtToken = Jwts.builder()
                // 头信息
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                .setSubject("guli-user")   // 分类
                // 设置过期时间
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
                // 设置Token主体部分,存储用户信息
                .claim("id", id)
                .claim("nickname", nickname)
                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();
        return JwtToken;
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        return true;
     * 判断token是否存在与有效
     * @param request
     * @return
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        return true;
     * 根据token字符串获取id
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getHeader("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id");

3、验证用户登录成功之后生成Token字符串

String jwtToken = JwtUtils.getJwtToken(user.getId(),user.getNickname());

4、根据token信息获取用户信息

前面前端部分说了,每次请求的时候,都会将token信息放入header,这样就可以跨域(cookie无法跨域)。
要获取用户信息,则需要通过这个token信息来确定,使用jwt帮助类中的getMemberIdByJwtToken方法来获取。

* 根据token字符串获取id public static String getMemberIdByJwtToken(HttpServletRequest request) { String jwtToken = request.getHeader("token"); if(StringUtils.isEmpty(jwtToken)) return ""; Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken); Claims claims = claimsJws.getBody(); return (String)claims.get("id");

获取到id,我们就可以通过这个id去获取用户信息。

@GetMapping("/getUserInfo")
public R getMemberInfo(HttpServletRequest request){
	String userId = JwtUtils.getMemberIdByJwtToken(request);
	User user= userService.getById(userId);
	return R.ok().data("userInfo",user);

到此为止,完成了一个简单的token跨域验证。

前端部分需要将token字符串和用户信息存入的Cookie中,因此需要引入js-cookie。前端采用axios发送请求,所以还需要引入axios。1、封装axios创建一个request.js文件,用来封装axios。import axios from 'axios'; // 引入axiosimport cookie from 'js-cookie'; // 引入js-cookie... 打开src/services/api.js并修改config.headers以获取适当的后端(在教程中找到)。 instance . interceptors . request . use ( ( config ) => { const token = TokenService . getLocalAccessToken ( ) ; if ( token ) { // config.headers["Authorization"] = 'Bearer ' + token; // for Spring Boot back-end config
axios 中的拦截器 ax.interceptors.request 和 ax.interceptors.response // http request 拦截器 ax.interceptors.request.use( config => { **// 验证是否登录获取了token,如果有token ,那么就加到请求头中** if (store.state.jwtToken) { config.headers.Authorizati
import com.zuijin.vue2blog.common.utils.JwtUtil; import com.zuijin.vue2blog.service.UserComDetailsService; import org.springframework.beans.factory.annotation.Value; import org.springframework.security.aut 认证和授权,其实吧简单来说就是:认证就是让服务器知道你是谁,授权就是服务器让你知道你什么能干,什么不能干(例如下面meta元信息),认证授权俩种方式:Session-Cookie与JWT,下面我们就针对这两种方案就行阐述。 说起JWT,我们应该来谈一谈基于token的认证和传统的session认证的区别。毕竟我们在使用jwt之前,是使用session认证的。 传统的session认... 哈希:对复杂的数据进行摘要,10G 的内容,如果改了1kb ,那么它的哈希值也会改变的 实现方式 流程:我们以登录过程为例子,登录成功后签发 token,访问接口时携带 token 签发 Token 可以通过 json
一个项目学会前端实现登录拦截 一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器
1. 在服务端生成 JWT 并返回给客户端。 2. 客户端保存 JWT 并在请求中加上 HTTP Header,如 "Authorization: Bearer JWT"。 3. 服务端收到请求后验证 JWT 的有效性。 4. 如果 JWT 有效,则允许访问请求的资源。 以下是一个使用 Shiro 实现 JWT 验证的示例代码: ```java import org.apache.shiro.authc.AuthenticationException; import org.apache.shiro.authc.AuthenticationInfo; import org.apache.shiro.authc.AuthenticationToken; import org.apache.shiro.authc.SimpleAuthenticationInfo; import org.apache.shiro.authz.AuthorizationInfo; import org.apache.shiro.realm.AuthorizingRealm; import org.apache.shiro.subject.PrincipalCollection; import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; public class JwtRealm extends AuthorizingRealm { private String secretKey; public JwtRealm(String secretKey) { this.secretKey = secretKey; @Override public boolean supports(AuthenticationToken token) { return token instanceof JwtToken; @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) { // 这里可以根据 JWT 中的自定义字段来进行权限控制 return null; @Override protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException { JwtToken jwtToken = (JwtToken) token; String jwt = jwtToken.getPrincipal().toString(); Claims claims = Jwts.parser().setSigningKey(secretKey).parseClaimsJws(jwt).getBody(); // 验证 JWT 是否过期 if (claims.getExpiration().before(new Date())) { throw new AuthenticationException("JWT 已过期"); // 这里可以使用 claims 中的用户信息来创建 SimpleAuthenticationInfo 对象 return new SimpleAuthenticationInfo(jwt, jwt, "j
Host 'DESKTOP-BNFMG64' is not allowed to connect to this MySQL server解决方案 easy-going teacher: 方案一可以的 Host 'DESKTOP-BNFMG64' is not allowed to connect to this MySQL server解决方案 errors:everywhere: 很有用,第一个方法 logback - 自定义日志脱敏组件,一种不错的脱敏方案 LYang1996: 郑则仕会把服务器搞挂