vue-admin-template基础模板使用(三)

配置跨域以及调用登录接口

1.配置跨域在vue.config.js中配置，这里是使用黑马的接口。。

// 配置代理服务说明
    // proxy: {
    //   // 请求中以/api开头,就意味着需要走代理
    //   '/api': {
    //     target: 'localhost:8080/api/login', // =>http://www.baidu.com/api/login
    //     // 路径重写 =>http://www.baidu.com/login
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }

2.配置base api

在.env.development中写

VUE_APP_BASE_API = ‘/api’

在.env.production中写

# base api
# 如果线上是nginx配置跨域的VUE_APP_BASE_API = '/api'这样写是可以的，如果是cors则需要写完整地址VUE_APP_BASE_API = 'http://www.baidu.com'
VUE_APP_BASE_API = 'http://www.baidu.com'

2.登录接口为api配置为

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

在user.js中写入

// 封装获取token存储在vuex以及cookie中，actions(异步)
  login({ commit }, userInfo) {
    const { mobile, password } = userInfo
    return new Promise((resolve, reject) => {
      // promise中，可以封装一个异步的操作，成功的时候调用resolve，失败的时候调用reject
      login({ mobile: mobile, password: password }).then(response => {
        const { data } = response
        // 拿到token，actions中不能直接修改state，需要提交mutation
        commit('SET_TOKEN', data) // data为token
        setToken(data)
        // 成功
        resolve()
      }).catch(error => {
        // 失败
        reject(error)
      })
    })
  },

这样直接就可以在登录页面login.vue中使用了

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(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })