通過(guò)文章加深對(duì)token、refresh_token的理解，以及怎么使用

后端

1.登錄獲取token，如果已經(jīng)登錄了再次訪問(wèn)登錄結(jié)果，還是返回相同的token，不重新生成新的

{
    "token":"478f71ce-0c34-44a0-a002-d33a4d7a5451", // accessToken
    "expire":86400,  // token過(guò)期時(shí)間
    "refreshToken":"9e6b24ff-34d0-4fd8-847f-4d4842a4b77c" // refreshToken
}

2.刷新token，返回登錄獲取token同樣的對(duì)象，如果token沒(méi)過(guò)期，對(duì)token與refreshToken進(jìn)行續(xù)期，如果已過(guò)期生成新得token與refreshToken

前端

1.主要有3種請(qǐng)求(具體邏輯如下圖)

1.不需要鑒權(quán)的接口，直接訪問(wèn)后端即可，可以通過(guò)正則的方式匹配
2.需要鑒權(quán)的接口，需要拿到有效的token才能訪問(wèn)后端
3.刷新token接口，需要拿到refreshToken

token.jpg

import axios from 'axios'
import router from '../router'
import store from '../vuex/store'
import * as types from '../vuex/types'
import {Loading} from 'element-ui'

// 默認(rèn)超時(shí)時(shí)間
axios.defaults.timeout = 50000

// 相對(duì)路徑設(shè)置
axios.defaults.baseURL = ''

let loading

// 開(kāi)始加載
function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '加載中...',
        background: 'rgba(0, 0, 0, 0.2)'
    })
}

// 結(jié)束加載
function endLoading() {
    loading.close()
}


let needLoadingRequestCount = 0

export function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++
}


export function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}

// 是否有請(qǐng)求在刷新token
window.isRefreshing = false
// 被掛起的請(qǐng)求數(shù)組
let subscribesArr = []

// push所有請(qǐng)求到數(shù)組中
function subscribeTokenRefresh(cb) {
    subscribesArr.push(cb)
}

// 用新token發(fā)起請(qǐng)求
function reloadSubscribesArr(token) {
    subscribesArr.map(cb => cb(token))
}

/**
 * 快過(guò)期了 和 已經(jīng)過(guò)期了
 * @returns {boolean}
 */
function isTokenExpired() {
    let expiredTime = store.state.expirationTime
    if (expiredTime) {
        let nowTime = new Date().getTime()
        let willExpired = (expiredTime - nowTime) / 1000 < 10 * 60
        return willExpired
    }
    return false
}


function directLogin() {
    router.push({
        path: '/home',
        query: {
            redirectUrl: window.location.href.split('#')[1] || ''
        }
    })
}

// http request 攔截器
axios.interceptors.request.use(
    config => {

        // 設(shè)置參數(shù)
        if (!config.headers['Content-Type']) {
            config.headers = {
                'Content-Type': 'application/json'
            }
        }
        // 如果是不需要token的接口直接返回即可
        if (config.url.startsWith('/blog/open') || config.url === '/blog/login') {
            return config
        }

        // 獲取token
        const token = store.state.accessToken
        // 如果token存在，首先校驗(yàn)是否已經(jīng)過(guò)期，如果已經(jīng)過(guò)期，跳轉(zhuǎn)到登錄頁(yè)面
        if (token) {
            let refreshToken = store.state.refreshToken
            if (isTokenExpired() && config.url.indexOf('/admin/') > -1) {
                if (!window.isRefreshing) {
                    window.isRefreshing = true
                    post('/blog/refresh/token', {refreshToken: refreshToken})
                        .then((res) => {
                            window.isRefreshing = false
                            if (res.code === 200) {
                                const tokenVo = res.data
                                store.dispatch('setTokenInfo', tokenVo)
                                reloadSubscribesArr(tokenVo.token)
                            } else {
                                subscribesArr = []
                                window.localStorage.clear()
                                directLogin()
                            }
                        })
                        .catch((err) => {
                            window.isRefreshing = false
                            subscribesArr = []
                            window.localStorage.clear()
                            directLogin()
                        })
                }
                let retry = new Promise((resolve, reject) => {
                    subscribeTokenRefresh((newToken) => {
                        config.headers.Authorization = `Bearer ${newToken}`
                        resolve(config)
                    })
                })
                return retry
            } else {
                config.headers.Authorization = `Bearer ${token}`
                return config
            }
        } else {
            directLogin()
        }
        // // 鑒權(quán)參數(shù)
        // if (config.method === 'get') {
        //     // get請(qǐng)求下 參數(shù)在params中，其他請(qǐng)求在dada中
        //     config.params = config.params || {}
        //     // let json = JSON.parse(JSON.stringify(config.params))
        //     // 一些參數(shù)處理
        // } else {
        //     config.data = config.data || {}
        //     // 一些參數(shù)處理
        // }
        showFullScreenLoading()
        return config
    },
    err => {
        tryHideFullScreenLoading()
        return Promise.reject(err)
    }
)


// http response 攔截器
axios.interceptors.response.use(
    response => {

        // 統(tǒng)一code處理
        if (response.status === 401) {
            window.localStorage.clear()
            router.push({
                name: '/home',
                query: {
                    redirectUrl: window.location.href.split('#')[1] || '',
                    is_new_user_url: 1
                }
            })
        } else if (response.status === 500) {
            this.$message.error(response.error)
        }
        tryHideFullScreenLoading()
        return response
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    store.commit(types.SET_LOGIN_STATUS, false)
                    store.commit(types.REMOVE_TOKEN_INFO)
                    router.replace({
                        path: '/home',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        tryHideFullScreenLoading()
        return Promise.reject(error.response.data)
    }
)

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                if (response.status === 200) {
                    resolve(response.data)
                } else {
                    this.$message.error(response.statusText)
                }
            }, err => {
                reject(err)
            })
    })
}

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                if (response.status === 200) {
                    resolve(response.data)
                } else {
                    this.$message.error(response.statusText)
                }
            }, err => {
                reject(err)
            })
    })
}

export function get(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, data)
            .then(response => {
                if (response.status === 200) {
                    resolve(response.data)
                } else {
                    this.$message.error(response.statusText)
                }
            }, err => {
                reject(err)
            })
    })
}

export function del(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, data)
            .then(response => {
                if (response.status === 200) {
                    resolve(response.data)
                } else {
                    this.$message.error(response.statusText)
                }
            }, err => {
                reject(err)
            })
    })
}

export function form(url, formData = {}) {
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
    return new Promise((resolve, reject) => {
        axios.post(url, formData, config)
            .then(response => {
                if (response.status === 200) {
                    resolve(response.data)
                } else {
                    this.$message.error(response.statusText)
                }
            }, err => {
                reject(err)
            })
    })
}