JWT - 通过Axios拦截器完成Token转发实现单点登录

前端部分

需要将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()