1、先看一下請求配置檔案，看axios.create這個方法，baseURL是基礎路由

baseURL:process.env.vue_APP_BASE_API,

路徑：src-utils-requehttp://www.cppcns.comst.js

2、然後再看service.interceptors.request.use，設定token請求頭，我後端整合的是jwt，所以請求頭是Authentication，如圖

config.headers['Authentication'] = getToken()

3.設定自己的狀態碼，看service.interceptors.response.use，如圖，設定為自己的狀態碼

這是我伺服器響應的資料，如下，1是正常響應資料

{
    "code": 1,"data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBY2NvdW50SWQiOiJhZG1pbiIsIm5iZiI6MTYyNDE3NTM4MiwiZXhwIjoxNjI0MTc1NDQyLCJpYXQiOjE2MjQxNzUzODJ9.7p8EHMx1b4-yIMRN7Qxden3nZsDmBvevHEf-3oVhFMg","message": "登入成功","state": true
    }
}

4、改.env.production和.env.development裡面的api都為空，圖只展示.env.production

5、改基礎路由配置，在devServer後面新增如下程式碼（before這行註釋掉，這個用來模擬資料的，用不到），如圖

// before: require('./mock/mock-server.js')
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'https://xiaoxingbobo.top',// target: 'http://192.168.1.119:8081',// target: 'http://192.168.1.253:8081',changeOrigin: true,pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

到這裡基礎路由基本配置好了

6、在src-view-login-index.html檔案中，找到Vue-Element-Admin的登入介面，新增如下程式碼，如圖，把官方的請求方式註釋掉，this.loginForm是請求www.cppcns.com引數

this.loading = true
          this.$store.dispatch('user/login',this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/',query: this.otherQuery })
              this.loading = false
            })
            .catch((e) => {
              this.tool.log(e)
              this.loading = false
            })

7、設定使用者登入成功後的跳轉，登入後必須把token做快取，不然登入頁跳轉不了

在src-store-moduls-use.js，如圖

找到action下的login方法，修改程式碼如下

const actions = {
  // user login
  login({
    commit
  },userInfo) {
    const {
      accountId,password
    } = userInfo
 
    return new Promise((resolve,reject) => {
      console.log('userInfo',userInfo)
      //伺服器需要的登入引數
      const payload = {
        accountId: accountId,password: password
      }
      //請求伺服器
      user.login(payload).then(response => {
        const {
          data
        } = response
        console.log('response',response)
        commit('SET_TOKEN',data.程式設計客棧token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

找到getInfo方法，修改程式碼如下，因為獲取使用者資訊介面沒寫，所以資料直接寫死，根據自己的做調整

getInfo({
    commit,state
  }) {
    return new Promise((resolve,reject) => {
      /**
       * 這裡請求使用者資訊和許可權，目前介面沒做，只註釋了，data寫死
       * */
      // user.getInfo(state.token).then(response => {
      // const {
      //   data
      // } = response
      const {
        data
      } = {
        data: {
          roles: ['admin'],intrhttp://www.cppcns.comoduction: 'Administrator',avatar: 'https://cloud.xiaoxingbobo.top/nongzhibang/20210429/1107491622257669573',name: 'administrator'
        }
      }
 
      if (!data) {
        reject('Verification failed,please Login again.')
      }
 
      const {
        roles,name,avatar,introduction,token
      } = data
 
      // roles must www.cppcns.combe a non-empty array
      if (!roles || roles.length <= 0) {
        reject('getInfo: roles must be a non-null array!')
      }
 
      commit('SET_ROLES',roles)
      commit('SET_NAME',name)
      commit('SET_AVATAR',avatar)
      commit('SET_INTRODUCTION',introduction)
      commit('SET_TOKEN',token)
      resolve(data)
      // }).catch(error => {
      //   reject(error)
      // })
    })
  },

這樣就搞定了Vue-Element-Admin，可以登入到首頁了

到此這篇關於Vue-Element-Admin整合自己的介面實現登入跳轉的文章就介紹到這了,更多相關Vue-Element-Admin登入跳轉內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！