以退出登錄接口為例

1. 封裝request.js：添加請(qǐng)求攔截器和響應(yīng)攔截器
2. 封裝permission.js：添加路由導(dǎo)航守衛(wèi)
3. 在src/api/user.js中寫接口
4. 在store中寫退出登錄邏輯
5. 在vue頁(yè)面中調(diào)用登錄接口

1. 封裝request.js

請(qǐng)求攔截器：做一些發(fā)送請(qǐng)求前的操作，比如說(shuō)在請(qǐng)求頭上攜帶token，處理一些錯(cuò)誤
響應(yīng)攔截器：處理接口發(fā)送后的響應(yīng)數(shù)據(jù)

import axios from 'axios'
import router from '@/router'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  baseURL: '/api', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 請(qǐng)求超時(shí)
})
// 請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    // 發(fā)送請(qǐng)求前的操作
    if (store.getters.token) {
      // 讓每個(gè)請(qǐng)求攜帶 token
      // 請(qǐng)根據(jù)實(shí)際情況修改
      config.headers.common['Authorization'] = getToken()
    
    return config
  },
  (error) => {
    // 處理請(qǐng)求錯(cuò)誤
    console.log('請(qǐng)求錯(cuò)誤', error) // for debug
    return Promise.reject(error)
  }
)

// 響應(yīng)攔截器
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * 通過(guò)自定義代碼確定請(qǐng)求狀態(tài)
   * 這里只是一個(gè)例子
   * 您也可以通過(guò)HTTP狀態(tài)代碼來(lái)判斷狀態(tài)
   */
  (response) => {
    console.log(`?? ~ 響應(yīng)數(shù)據(jù):${response.config.url}`, response.data)
    const res = response.data

    // 如果code不是200，則判斷為錯(cuò)誤。
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: 非法 token; 50012: 其他客戶端已經(jīng)登錄; 50014: Token過(guò)期;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm(
          'You have been logged out, you can cancel to stay on this page, or log in again',
          'Confirm logout',
          {
            confirmButtonText: 'Re-Login',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

  (error) => {
    const { response } = error
    console.error('網(wǎng)絡(luò)繁忙', response)
    if (response) {
      if (response.status == 401) {
        router.push('/login')
        store.dispatch('user/logout')
        response.data = {
          success: false,
          errorMsg: '登錄信息已過(guò)期，請(qǐng)您重新登錄'
        }
        return response
      }
      return Promise.reject(
        '由于網(wǎng)絡(luò)繁忙，請(qǐng)求' + response.config.apiDesc + '有誤，請(qǐng)稍后再試'
      )
    } else {
      return Promise.reject('請(qǐng)求被中斷')
    }
  }
)

2. 封裝permission.js

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

//接口白名單，這里面的頁(yè)面不需要登錄就可以直接訪問(wèn)
const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // 判斷是否有token，確定用戶是否已登錄
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登錄，則重定向到主頁(yè)
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // 獲取用戶信息
          // await store.dispatch('user/getInfo')
          next()
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /*沒(méi)有token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // 在白名單中，直接進(jìn)入
      next()
    } else {
      // 其他沒(méi)有訪問(wèn)權(quán)限的頁(yè)面被重定向到登錄頁(yè)面
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

3. 在src/api/user.js中寫接口

import request from '@/utils/request'
//退出登錄
export function logout() {
  return request({
    url: '/typt-admin/admin/logout',
    method: 'post'
  })
}

4. 在store中寫退出登錄邏輯

其他代碼自己參照項(xiàng)目看，貼一段文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-603026.html

 // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token)
        .then(() => {
          removeToken() // 刪除cookie中的token
          resetRouter()
          commit('RESET_STATE')
          resolve()
        })
        .catch((error) => {
          reject(error)
        })
    })
  },

最后直接在vue頁(yè)面引用就行

 methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }

到了這里，關(guān)于vue-element-admin的接口請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！