Vue-element-Admin 은 자신의 인 터 페 이 스 를 통합 하여 로그 인 점프 를 실현 합 니 다.

1.먼저 요청 프로필 을 살 펴 보고 axios.create 방법 을 보 세 요.baseURL 은 기본 경로 입 니 다.

baseURL:process.env.VUE_APP_BASE_API,

경로:src-utils-request.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: 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 은 요청 매개 변수 입 니 다.

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'],
          introduction: '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 be 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 로그 인 점프 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!