Vue-Element-Admin integrates its own interface to realize login jump

1. First look at the request configuration file, look at the axios.create method, baseURL is the basic route

baseURL:process.env.VUE_APP_BASE_API,

Path: src-utils-request.js

2. Then look at service.interceptors.request.use and set the token request header. My backend is integrated with jwt, so the request header is Authentication, as shown in the figure

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

3. Set your own status code, see service.interceptors.response.use, as shown in the figure, set it to your own status code

This is the data my server responds to, as follows, 1 is the normal response data

{
    "code": 1,
    "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBY2NvdW50SWQiOiJhZG1pbiIsIm5iZiI6MTYyNDE3NTM4MiwiZXhwIjoxNjI0MTc1NDQyLCJpYXQiOjE2MjQxNzUzODJ9.7p8EHMx1b4-yIMRN7Qxden3nZsDmBvevHEf-3oVhFMg",
    "message": "Login successful",
    "state": true
    }
}

4. Change the api in .env.production and .env.development to empty, and the picture only shows .env.production

5. Change the basic routing configuration and add the following code after devServer (comment out the before line, which is used to simulate data and is not needed), as shown in the figure

// 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]: ''
        }
      }
    }

The basic routing is basically configured here.

6. In the src-view-login-index.html file, find the login interface of Vue-Element-Admin and add the following code, as shown in the figure, comment out the official request method, this.loginForm is the request parameter

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. Set the jump after the user successfully logs in. The token must be cached after logging in, otherwise the login page will not jump

In src-store-moduls-use.js, as shown in the figure

Find the login method under action and modify the code as follows

const actions = {
  // user login
  login({
    commit
  }, userInfo) {
    const {
      accountId,
      password
    } = userInfo
 
    return new Promise((resolve, reject) => {
      console.log('userInfo', userInfo)
      //Login parameters required by the server const payload = {
        accountId: accountId,
        password: password
      }
      //Request server 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)
      })
    })
  },

Find the getInfo method and modify the code as follows. Because the interface for obtaining user information is not written, the data is directly hard-coded. Make adjustments according to your own needs.

getInfo({
    commit,
    state
  }) {
    return new Promise((resolve, reject) => {
      /**
       * User information and permissions are requested here. Currently, the interface is not implemented, only comments are given, and data is hard-coded* */
      // 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,
        ,
        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)
      // })
    })
  },

This completes Vue-Element-Admin and you can log in to the homepage

This is the end of this article about Vue-Element-Admin integrating its own interface to realize login jump. For more relevant Vue-Element-Admin login jump content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: