1、使用密码模式获取token
Headers里面加TenantId:0参数
2、通过refresh_token刷新token
3、再次执行refresh_token刷新token，此时因为refresh_token已经调用过一次，所以这里不能再次使用
1、使用axios-auth-refresh公共组件，当后台状态返回401时，进行token刷新操作
import axios from 'axios' import createAuthRefreshInterceptor from 'axios-auth-refresh' import store from '@/store' import storage from 'store' import { serialize } from '@/utils/util' import notification from 'ant-design-vue/es/notification' import modal from 'ant-design-vue/es/modal' import { VueAxios } from './axios' import { ACCESS_TOKEN, REFRESH_ACCESS_TOKEN } from '@/store/mutation-types' // 创建 axios 实例 const request = axios.create({ // API 请求的默认前缀 baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 30000 // 请求超时时间 }) // 当token失效时，需要调用的刷新token的方法 const refreshAuthLogic = failedRequest => axios.post(process.env.VUE_APP_API_BASE_URL + '/gitegg-oauth/oauth/token', serialize({ client_id: process.env.VUE_APP_CLIENT_ID, client_secret: process.env.VUE_APP_CLIENT_SECRET, grant_type: 'refresh_token', refresh_token: storage.get(REFRESH_ACCESS_TOKEN) }), { headers: { 'TenantId': process.env.VUE_APP_TENANT_ID, 'Content-Type': 'application/x-www-form-urlencoded' } } ).then(tokenRefreshResponse => { if (tokenRefreshResponse.status === 200 && tokenRefreshResponse.data && tokenRefreshResponse.data.success) { const result = tokenRefreshResponse.data.data storage.set(ACCESS_TOKEN, result.tokenHead + result.token, result.expiresIn * 1000) storage.set(REFRESH_ACCESS_TOKEN, result.refreshToken, result.refreshExpiresIn * 1000) failedRequest.response.config.headers['Authorization'] = result.tokenHead + result.token } return Promise.resolve() }) // 初始化刷新token拦截器 createAuthRefreshInterceptor(request, refreshAuthLogic, { pauseInstanceWhileRefreshing: true // 当刷新token执行时，暂停其他请求 }) // 异常拦截处理器 const errorHandler = (error) => { if (error.response) { const data = error.response.data if (error.response.status === 403) { notification.error({ message: '禁止访问', description: data.message }) } else if (error.response.status === 401 && !(data.result && data.result.isLogin)) { // 当刷新token超时，则调到登录页面 modal.warn({ title: '登录超时', content: '由于您长时间未操作， 为确保安全， 请重新登录系统进行后续操作 ！', okText: '重新登录', onOk () { store.dispatch('Timeout').then(() => { window.location.reload() }) } }) } } return Promise.reject(error) } // request interceptor request.interceptors.request.use(config => { const token = storage.get(ACCESS_TOKEN) // 如果 token 存在 // 让每个请求携带自定义 token 请根据实际情况自行修改 if (token) { config.headers['Authorization'] = token } config.headers['TenantId'] = process.env.VUE_APP_TENANT_ID return config }, errorHandler) // response interceptor request.interceptors.response.use((response) => { const res = response.data if (res.code) { if (res.code !== 200) { notification.error({ message: '操作失败', description: res.msg }) return Promise.reject(new Error(res.msg || 'Error')) } else { return response.data } } else { return response } }, errorHandler) const installer = { vm: {}, install (Vue) { Vue.use(VueAxios, request) } } export default request export { installer as VueAxios, request as axios } 四、记住密码功能实现有时候，在我们在可信任的电脑上可以实现记住密码功能，前后端分离项目的实现只需要把密码记录到localstorage中，然后每次访问登录界面时，自动填入即可。这里先使用明文进行存储，为了系统安全，在实际应用过程需要将密码加密存储，后台校验加密后的密码
1、在created中读取是否记住密码