axios封装请求request.js等工具函数较完整三方登录

发布时间：2023年12月25日

import axios from 'axios'
import {Message, MessageBox, Notification} from 'element-ui'
import store from '@/store'
import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import {getPath, getTenantEnable} from "@/utils/ruoyi";
import {refreshToken} from "@/api/login";

// 需要忽略的提示。忽略后，自动 Promise.reject('error')
const ignoreMsgs = [
? "无效的刷新令牌", // 刷新令牌被删除时，不用提示
? "刷新令牌已过期" // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
]

// 是否显示重新登录
export let isRelogin = { show: false };
// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
// 请求队列
let requestList = []
// 是否正在刷新中
let isRefreshToken = false

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
? // axios中请求配置有baseURL选项，表示请求URL公共部分
? baseURL: process.env.VUE_APP_BASE_API + '/admin-api/', // 此处的 /admin-api/ 地址，原因是后端的基础路径为 /admin-api/
? // 超时
? timeout: 30000,
? // 禁用 Cookie 等信息
? withCredentials: false,
})
// request拦截器
service.interceptors.request.use(config => {
? // 是否需要设置 token
? const isToken = (config.headers || {}).isToken === false
? if (getAccessToken() && !isToken) {
? ? config.headers['Authorization'] = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
? }
? // 设置租户
? if (getTenantEnable()) {
? ? const tenantId = getTenantId();
? ? if (tenantId) {
? ? ? config.headers['tenant-id'] = tenantId;
? ? }
? }
? // get请求映射params参数
? if (config.method === 'get' && config.params) {
? ? let url = config.url + '?';
? ? for (const propName of Object.keys(config.params)) {
? ? ? const value = config.params[propName];
? ? ? const part = encodeURIComponent(propName) + '='
? ? ? if (value !== null && typeof(value) !== "undefined") {
? ? ? ? if (typeof value === 'object') {
? ? ? ? ? for (const key of Object.keys(value)) {
? ? ? ? ? ? let params = propName + '[' + key + ']';
? ? ? ? ? ? const subPart = encodeURIComponent(params) + '='
? ? ? ? ? ? url += subPart + encodeURIComponent(value[key]) + "&";
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? url += part + encodeURIComponent(value) + "&";
? ? ? ? }
? ? ? }
? ? }
? ? url = url.slice(0, -1);
? ? config.params = {};
? ? config.url = url;
? }
? return config
}, error => {
? ? console.log(error)
? ? Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(async res => {
? // 未设置状态码则默认成功状态
? const code = res.data.code || 200;
? // 获取错误信息
? const msg = res.data.msg || errorCode[code] || errorCode['default']
? if (ignoreMsgs.indexOf(msg) !== -1) { // 如果是忽略的错误码，直接返回 msg 异常
? ? return Promise.reject(msg)
? } else if (code === 401) {
? ? // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
? ? if (!isRefreshToken) {
? ? ? isRefreshToken = true;
? ? ? // 1. 如果获取不到刷新令牌，则只能执行登出操作
? ? ? if (!getRefreshToken()) {
? ? ? ? return handleAuthorized();
? ? ? }
? ? ? // 2. 进行刷新访问令牌
? ? ? try {
? ? ? ? const refreshTokenRes = await refreshToken()
? ? ? ? // 2.1 刷新成功，则回放队列的请求 + 当前请求
? ? ? ? setToken(refreshTokenRes.data)
? ? ? ? requestList.forEach(cb => cb())
? ? ? ? return service(res.config)
? ? ? } catch (e) {// 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
? ? ? ? // 2.2 刷新失败，只回放队列的请求
? ? ? ? requestList.forEach(cb => cb())
? ? ? ? // 提示是否要登出。即不回放当前请求！不然会形成递归
? ? ? ? return handleAuthorized();
? ? ? } finally {
? ? ? ? requestList = []
? ? ? ? isRefreshToken = false
? ? ? }
? ? } else {
? ? ? // 添加到队列，等待刷新获取到新的令牌
? ? ? return new Promise(resolve => {
? ? ? ? requestList.push(() => {
? ? ? ? ? res.config.headers['Authorization'] = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
? ? ? ? ? resolve(service(res.config))
? ? ? ? })
? ? ? })
? ? }
? } else if (code === 500) {
? ? Message({
? ? ? message: msg,
? ? ? type: 'error'
? ? })
? ? return Promise.reject(new Error(msg))
? } else if (code === 501) {
? ? Message({
? ? ? type: 'error',
? ? ? duration: 0,
? ? ? message: msg
? ? })
? ? return Promise.reject(new Error(msg))
? } else if (code === 901) {
? ? Message({
? ? ? type: 'error',
? ? ? duration: 0,
? ? ? dangerouslyUseHTMLString: true,
? ? ? message: '<div>演示模式，无法进行写操作</div>'
? ? ? ? + '<div>   </div>'
? ? ? ? + '<div>参考 https://doc.iocoder.cn/ 教程</div>'
? ? ? ? + '<div>   </div>'
? ? ? ? + '<div>5 分钟搭建本地环境</div>',
? ? })
? ? return Promise.reject(new Error(msg))
? } else if (code !== 200) {
? ? if (msg === '无效的刷新令牌') { // hard coding：忽略这个提示，直接登出
? ? ? console.log(msg)
? ? } else {
? ? ? Notification.error({
? ? ? ? title: msg
? ? ? })
? ? }
? ? return Promise.reject('error')
? } else {
? ? return res.data
? }
}, error => {
? ? console.log('err' + error)
? ? let {message} = error;
? ? if (message === "Network Error") {
? ? ? message = "后端接口连接异常";
? ? } else if (message.includes("timeout")) {
? ? ? message = "系统接口请求超时";
? ? } else if (message.includes("Request failed with status code")) {
? ? ? message = "系统接口" + message.substr(message.length - 3) + "异常";
? ? }
? ? Message({
? ? ? message: message,
? ? ? type: 'error',
? ? ? duration: 5 * 1000
? ? })
? ? return Promise.reject(error)
? }
)

export function getBaseHeader() {
? return {
? ? 'Authorization': "Bearer " + getAccessToken(),
? ? 'tenant-id': getTenantId(),
? }
}

export default service
?

auth.js

import {decrypt, encrypt} from "@/utils/jsencrypt";

const AccessTokenKey = 'ACCESS_TOKEN'
const RefreshTokenKey = 'REFRESH_TOKEN'

// ========== Token 相关 ==========

export function getAccessToken() {
? return localStorage.getItem(AccessTokenKey)
}

export function getRefreshToken() {
? return localStorage.getItem(RefreshTokenKey)
}

export function setToken(token) {
? localStorage.setItem(AccessTokenKey, token.accessToken)
? localStorage.setItem(RefreshTokenKey, token.refreshToken)
}

export function removeToken() {
? localStorage.removeItem(AccessTokenKey)
? localStorage.removeItem(RefreshTokenKey)
}

// ========== 账号相关 ==========

const UsernameKey = 'USERNAME'
const PasswordKey = 'PASSWORD'
const RememberMeKey = 'REMEMBER_ME'

export function getUsername() {
? return localStorage.getItem(UsernameKey)
}

export function setUsername(username) {
? localStorage.setItem(UsernameKey, username)
}

export function removeUsername() {
? localStorage.removeItem(UsernameKey)
}

export function getPassword() {
? const password = localStorage.getItem(PasswordKey)
? return password ? decrypt(password) : undefined
}

export function setPassword(password) {
? localStorage.setItem(PasswordKey, encrypt(password))
}

export function removePassword() {
? localStorage.removeItem(PasswordKey)
}

export function getRememberMe() {
? return localStorage.getItem(RememberMeKey) === 'true'
}

export function setRememberMe(rememberMe) {
? localStorage.setItem(RememberMeKey, rememberMe)
}

export function removeRememberMe() {
? localStorage.removeItem(RememberMeKey)
}

// ========== 租户相关 ==========

const TenantIdKey = 'TENANT_ID'
const TenantNameKey = 'TENANT_NAME'

export function getTenantName() {
? return localStorage.getItem(TenantNameKey)
}

export function setTenantName(username) {
? localStorage.setItem(TenantNameKey, username)
}

export function removeTenantName() {
? localStorage.removeItem(TenantNameKey)
}

export function getTenantId() {
? return localStorage.getItem(TenantIdKey)
}

export function setTenantId(username) {
? localStorage.setItem(TenantIdKey, username)
}

export function removeTenantId() {
? localStorage.removeItem(TenantIdKey)
}

export class getToken {
}
?

errCode.js

export default {
? '401': '认证失败，无法访问系统资源',
? '403': '当前操作没有权限',
? '404': '访问资源不存在',
? 'default': '系统未知错误，请反馈给管理员'
}
?

ruoyi.js

/**
?* 通用js方法封装处理
?* Copyright (c) 2019 ruoyi
?*/

const baseURL = process.env.VUE_APP_BASE_API

// 日期格式化
export function parseTime(time, pattern) {
? if (arguments.length === 0 || !time) {
? ? return null
? }
? const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
? let date
? if (typeof time === 'object') {
? ? date = time
? } else {
? ? if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
? ? ? time = parseInt(time)
? ? } else if (typeof time === 'string') {
? ? ? time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
? ? }
? ? if ((typeof time === 'number') && (time.toString().length === 10)) {
? ? ? time = time * 1000
? ? }
? ? date = new Date(time)
? }
? const formatObj = {
? ? y: date.getFullYear(),
? ? m: date.getMonth() + 1,
? ? d: date.getDate(),
? ? h: date.getHours(),
? ? i: date.getMinutes(),
? ? s: date.getSeconds(),
? ? a: date.getDay()
? }
? const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
? ? let value = formatObj[key]
? ? // Note: getDay() returns 0 on Sunday
? ? if (key === 'a') {
? ? ? return ['日', '一', '二', '三', '四', '五', '六'][value]
? ? }
? ? if (result.length > 0 && value < 10) {
? ? ? value = '0' + value
? ? }
? ? return value || 0
? })
? return time_str
}

// 表单重置
export function resetForm(refName) {
? if (this.$refs[refName]) {
? ? this.$refs[refName].resetFields();
? }
}

// 添加日期范围
export function addDateRange(params, dateRange, propName) {
? const search = params;
? search.params = {};
? if (null != dateRange && '' !== dateRange) {
? ? if (typeof (propName) === "undefined") {
? ? ? search["beginTime"] = dateRange[0];
? ? ? search["endTime"] = dateRange[1];
? ? } else {
? ? ? search["begin" + propName] = dateRange[0];
? ? ? search["end" + propName] = dateRange[1];
? ? }
? }
? return search;
}

/**
?* 添加开始和结束时间到 params 参数中
?*
?* @param params 参数
?* @param dateRange 时间范围。
?* ? ? ? ? ? ? ? ?大小为 2 的数组，每个时间为 yyyy-MM-dd 格式
?* @param propName 加入的参数名，可以为空
?*/
export function addBeginAndEndTime(params, dateRange, propName) {
? // 必须传入参数
? if (!dateRange) {
? ? return params;
? }
? // 如果未传递 propName 属性，默认为 time
? if (!propName) {
? ? propName = 'Time';
? } else {
? ? propName = propName.charAt(0).toUpperCase() + propName.slice(1);
? }
? // 设置参数
? if (dateRange[0]) {
? ? params['begin' + propName] = dateRange[0] + ' 00:00:00';
? }
? if (dateRange[1]) {
? ? params['end' + propName] = dateRange[1] + ' 23:59:59';
? }
? return params;
}

// 字符串格式化(%s )
export function sprintf(str) {
? const args = arguments
? let flag = true
? const i = 1
? str = str.replace(/%s/g, function () {
? ? const arg = args[i++]
? ? if (typeof arg === 'undefined') {
? ? ? flag = false;
? ? ? return '';
? ? }
? ? return arg;
? });
? return flag ? str : '';
}

// 转换字符串，undefined,null等转化为""
export function praseStrEmpty(str) {
? if (!str || str === "undefined" || str === "null") {
? ? return "";
? }
? return str;
}

/**
?* 构造树型结构数据
?* @param {*} data 数据源
?* @param {*} id id字段默认 'id'
?* @param {*} parentId 父节点字段默认 'parentId'
?* @param {*} children 孩子节点字段默认 'children'
?* @param {*} rootId 根Id 默认 0
?*/
export function handleTree(data, id, parentId, children, rootId) {
? id = id || 'id'
? parentId = parentId || 'parentId'
? children = children || 'children'
? rootId = rootId || Math.min.apply(Math, data.map(item => {
? ? return item[parentId]
? })) || 0
? //对源数据深度克隆
? const cloneData = JSON.parse(JSON.stringify(data))
? //循环所有项
? const treeData = cloneData.filter(father => {
? ? let branchArr = cloneData.filter(child => {
? ? ? //返回每一项的子级数组
? ? ? return father[id] === child[parentId]
? ? });
? ? branchArr.length > 0 ? father.children = branchArr : '';
? ? //返回第一层
? ? return father[parentId] === rootId;
? });
? return treeData !== '' ? treeData : data;
}

/**
?* 获取当前时间
?* @param timeStr 时分秒字符串格式为 xx:xx:xx
?*/
export function getNowDateTime(timeStr) {
? let now = new Date();
? let year = now.getFullYear(); //得到年份
? let month = (now.getMonth() + 1).toString().padStart(2, "0"); //得到月份
? let day = now.getDate().toString().padStart(2, "0"); //得到日期

? if (timeStr != null) {
? ? return `${year}-${month}-${day} ${timeStr}`;
? }
? let hours = now.getHours().toString().padStart(2, "0") // 得到小时;
? let minutes = now.getMinutes().toString().padStart(2, "0") // 得到分钟;
? let seconds = now.getSeconds().toString().padStart(2, "0") // 得到秒;
? return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

/**
?* 获得租户功能是否开启
?*/
export function getTenantEnable() {
? // console.log("enable: " + process.env.VUE_APP_TENANT_ENABLE)
? if (process.env.VUE_APP_TENANT_ENABLE === "true") {
? ? return true;
? }
? if (process.env.VUE_APP_TENANT_ENABLE === "false") {
? ? return false;
? }
? return process.env.VUE_APP_TENANT_ENABLE || true;
}

/**
?* 获得验证码功能是否开启
?*/
export function getCaptchaEnable() {
? if (process.env.VUE_APP_CAPTCHA_ENABLE === "true") {
? ? return true;
? }
? if (process.env.VUE_APP_CAPTCHA_ENABLE === "false") {
? ? return false;
? }
? return process.env.VUE_APP_CAPTCHA_ENABLE || true;
}

/**
?* 获得文档是否开启
?*/
export function getDocEnable() {
? if (process.env.VUE_APP_DOC_ENABLE === "true") {
? ? return true;
? }
? if (process.env.VUE_APP_DOC_ENABLE === "false") {
? ? return false;
? }
? return process.env.VUE_APP_DOC_ENABLE || false;
}

/**
?* 获得 Vue 应用的基础路径
?*/
export function getBasePath() {
? return process.env.VUE_APP_APP_NAME || '/';
}

/**
?* 获得 Vue 应用的访问路径
?*
?* @param path 路径
?*/
export function getPath(path) {
? // 基础路径，必须以 / 结尾
? let basePath = getBasePath();
? if (!basePath.endsWith('/')) {
? ? return basePath + '/';
? }
? // 访问路径，必须不能以 / 开头
? if (path.startsWith('/')) {
? ? path = path.substring(1);
? }
? return basePath + path;
}

/**
?* 除法保留两位小数
?*
?* @param {*} divisor 除数
?* @param {*} dividend 被除数
?* @returns
?*/
?export function divide(divisor, dividend) {
? if(divisor == null || dividend == null || dividend === 0){
? ? return null;
? }
? return Math.floor(divisor/dividend*100)/100;
}
?

import request from '@/utils/request'
import { getRefreshToken } from '@/utils/auth'
import service from '@/utils/request'

// 登录方法
export function login(username, password, captchaVerification, socialType, socialCode, socialState) {
? const data = {
? ? username,
? ? password,
? ? captchaVerification,
? ? // 社交相关
? ? socialType,
? ? socialCode,
? ? socialState
? }
? return request({
? ? url: '/system/auth/login',
? ? method: 'post',
? ? data: data
? })
}

// 获取用户详细信息
export function getInfo() {
? return request({
? ? url: '/system/auth/get-permission-info',
? ? method: 'get'
? })
}

// 退出方法
export function logout() {
? return request({
? ? url: '/system/auth/logout',
? ? method: 'post'
? })
}

// 社交授权的跳转
export function socialAuthRedirect(type, redirectUri) {
? return request({
? ? url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri,
? ? method: 'get'
? })
}

// 社交快捷登录，使用 code 授权码
export function socialLogin(type, code, state) {
? return request({
? ? url: '/system/auth/social-login',
? ? method: 'post',
? ? data: {
? ? ? type,
? ? ? code,
? ? ? state
? ? }
? })
}

// 获取登录验证码
export function sendSmsCode(mobile, scene) {
? return request({
? ? url: '/system/auth/send-sms-code',
? ? method: 'post',
? ? data: {
? ? ? mobile,
? ? ? scene
? ? }
? })
}

// 短信验证码登录
export function smsLogin(mobile, code) {
? return request({
? ? url: '/system/auth/sms-login',
? ? method: 'post',
? ? data: {
? ? ? mobile,
? ? ? code
? ? }
? })
}

// 刷新访问令牌
export function refreshToken() {
? return service({
? ? url: '/system/auth/refresh-token?refreshToken=' + getRefreshToken(),
? ? method: 'post'
? })
}

// ========== OAUTH 2.0 相关 ==========

export function getAuthorize(clientId) {
? return request({
? ? url: '/system/oauth2/authorize?clientId=' + clientId,
? ? method: 'get'
? })
}

export function authorize(responseType, clientId, redirectUri, state,
? autoApprove, checkedScopes, uncheckedScopes) {
? // 构建 scopes
? const scopes = {}
? for (const scope of checkedScopes) {
? ? scopes[scope] = true
? }
? for (const scope of uncheckedScopes) {
? ? scopes[scope] = false
? }
? // 发起请求
? return service({
? ? url: '/system/oauth2/authorize',
? ? headers: {
? ? ? 'Content-type': 'application/x-www-form-urlencoded'
? ? },
? ? params: {
? ? ? response_type: responseType,
? ? ? client_id: clientId,
? ? ? redirect_uri: redirectUri,
? ? ? state: state,
? ? ? auto_approve: autoApprove,
? ? ? scope: JSON.stringify(scopes)
? ? },
? ? method: 'post'
? })
}

// 获取验证图片 ?以及token
export function reqGet(data) {
? return request({
? ? url: 'system/captcha/get',
? ? method: 'post',
? ? data
? })
}

// 滑动或者点选验证
export function reqCheck(data) {
? return request({
? ? url: '/system/captcha/check',
? ? method: 'post',
? ? data
? })
}

export class socialBindLogin {
}

<el-form-item style="width:100%;">

<span>{{item.title}}</span>

</div>

</el-form-item>

三方登录

async doSocialLogin(socialTypeEnum) {

// 设置登录中

this.loading = true;

let tenant = false;

if (this.tenantEnable) {

await this.$prompt('请输入租户名称', "提示", {

confirmButtonText: "确定",

cancelButtonText: "取消"

}).then(async ({value}) => {

await getTenantIdByName(value).then(res => {

const tenantId = res.data;

tenant = true

if (tenantId && tenantId >= 0) {

setTenantId(tenantId)

}

});

}).catch(() => {

// 取消登录按钮 loading状态

this.loading = false;

return false

});

} else {

tenant = true

}

if(tenant){

// 计算 redirectUri

const redirectUri = location.origin + '/social-login?'

+ encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢

// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';

// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';

// 进行跳转

socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {

// console.log(res.url);

window.location.href = res.data;? ?//通过接口返回的url跳转

});

}

文章来源:https://blog.csdn.net/qq_34114535/article/details/135199837
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

axios封装请求request.js等工具函数较完整 三方登录

axios封装请求request.js等工具函数较完整三方登录