基于vue-admin-template讲解调用真实登录接口和获

接口文档地址https://www.showdoc.com.cn/2059631189527964/9285704253516844

vue-damin-template下载地址：https://gitee.com/panjiachen/vue-admin-template?_from=gitee_search

1. 第一步：本地开发配置反向代理：

• 1.1 打开vue.config.js，找到before: require('./mock/mock-server.js')，把它注释掉，在这行代码上面或者下面，敲一段代码配置反向代理，解决跨域请求！！！

proxy: {
      //配置跨域
      '/api': {
        target: "https://lanqiao.it98k.cn",
        // ws:true,
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
// before: require('./mock/mock-server.js')

• 1.2 打开.env.development本地环境变量文件，修改VUE_APP_BASE_API

VUE_APP_BASE_API = '/api'

• PS：记住：修改了【vue.config.js】，就要重新启动项目，否则，配置将不生效！！

• 1.3 找到utils/request.js，找到config.headers['X-Token']，将X-Token修改成后端规定的key值，比如后端接收token得key叫Authentication，那你就改成Authentication

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

• 1.4 找到utils/request.js，找到if (res.code !== 20000)，将code码改成后端接口成功返回的code码。比如，后端接口成功返回的code码是200，那就改成200

if (res.code !== 200)

• PS：if (res.code === 50008 || res.code === 50012 || res.code === 50014)这里的code码根据实际情况来更改，比如token失效，后端code码返回401，你懂了没？

• 这个时候，我们再点击 登录按钮，会提示 接口 404

image.png

• 这是因为 ，这个开发模版之前是mock的接口，我们修改了原有的配置，但是没有把登录接口换成我们自己的，它请求的还是原来mock的登录接口，原来的接口已经失效了，所以才会404

2. 第二步：修改原来的登录接口，改成我们自己项目的登录接口：

• 找到src/api/user.js，找到 function login方法，将url后的接口地址改成/api/login

export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}

• 这个时候再点击登录按钮，接口就通了，但是我们的账号密码不是模版默认的，所以会报账号密码错误

image.png

• 下面我们输入正确的账号密码，在来看效果

image.png

• 我们可以看到，接口返回成功了，但是也没有发生跳转，也没有报错信息，怎么回事呢？下面开始排查错误。（要掌握排错的能力）

• 打开src/views/login/index.vue，找到登录按钮触发的方法handleLogin，在catch里打印错误信息 err

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch((err) => {
            // 打印错误信息 err
            console.log(err);
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

• 话外音：eslint很恶心，我们来关闭它，打开 vue.config.js，找到lintOnSave: process.env.NODE_ENV === 'development',，把值改成 false在重启项目即可！！！

lintOnSave: false,

• 通过打印可以看到，我们的错误信息 TypeError: Cannot read properties of undefined (reading 'token') at eval (user.js?0f9a:37:1)

image.png

• 我们找到报错的文件位置，user.js第37行，commit('SET_TOKEN', data.token)发现原来是token没有获取到，修改如下：

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        // const { data } = response
        commit('SET_TOKEN', response.token)
        setToken(response.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

• 现在再输入正确的账号密码，点击登录后，可以看到接口请求成功，然后紧接着执行了getInfo接口，但是报错404

image.png

• 上堂课我们讲过，这个开发模版的登录逻辑，是不是登录成功后，仅接着就要获取用户信息啊，获取不到就要执行getInfo用户信息接口，所以，我们找到该接口，把接口地址换成我们自己项目的。

3. 第三步：对接获取用户信息接口

• 打开src/api/user.js，找到getInfo接口，修改如下: 需要注意的是，根据接口文档来判断，接口是什么请求方式，我们的getInfo接口请求方式是post，method就要改成post，token不需要在url中传输，默认已经随着header请求头传给后端了。

export function getInfo(token) {
  return request({
    url: '/api/getInfo',
    method: 'post'
  })
}

image.png

• 现在我们再来点击登录试试看

image.png

• 可以看到，我们登录成功了，但是name 和 avatar 都是空的，下面来解决这两个问题，是什么造成的？

• 经过我们的排查，原来问题出在getInfo这个方法里，找到这个方法，可以看到我们后端接口返回的字段压根就没有name和avatar字段，更别说解构出来了。

• 下面来根据后端接口返回的数据，我们来解构username，把name改成username，后端接口没有返回头像，我们只能暂时存一个固定的头像了，在开发中，根据实际情况，要求后端返回个人头像。

getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { username } = data

        commit('SET_NAME', username)
        commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

• 下面退出登录后重新登录看看，发现点击 Log Out触发的方法是404，那就来修改下，因为模版模拟请求了退出登录接口，而我们的项目没有退出登录接口，那只能简单粗暴的清除掉本地的token就可以了，找到Log Out触发的方法logout，路径在src/layout/components/Navbar.vue，发现这个退出方法是触发的vuex中的logout方法，顺藤摸瓜找到vuex的logout方法，修改如下：

logout({ commit, state }) {
    return new Promise((resolve, reject) => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
    })
  },

• 在点击退出登录，可以退出到首页，再输入正确的账号密码，你就会惊奇的发现，哟呵，一切都搞定了噻

image.png