vue2人力资源项目2登录接口、跳转主页

用户名和密码

解决跨域问题

1.在vue.config.js里配置

 proxy: {
      // 如果请求地址里有api，就转成这个地址
      '/api': {
        target: 'https://heimahr.itheima.net/'
      }
    }
    // before: require('./mock/mock-server.js')
  },

axios封装

utils/request.js

import axios from 'axios'

// create an axios instance,设置基地址和响应时间

const service = axios.create({
  baseURL: '/api', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

处理请求拦截器，携带token

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  // 在store的配置中，modules属性是一个对象，包含了之前导入的模块。
  // 每个模块都会被添加到store中，并且可以独立地拥有自己的状态和逻辑。
  // getters属性直接引用了之前导入的getters对象，这些getter函数会被添加到store中，可以在整个应用中被访问。
  getters
})
// 将store实例导出默认，这样其他文件（比如主入口文件main.js）就可以导入并使用它。
export default store

utils/request.js

// 基于之前创建的axios实例创建响应拦截器
// 成功时执行第一个回调函数
// 失败时执行第二个回调函数
service.interceptors.request.use((config) => {
  // 注入token
  // 记得要return，要使用config
  if (store.getters.token) {
    config.headers.Authorization = `Bearer${store.getters.token}`
  }
  return config
}, (error) => { return Promise.reject(error) })

export default service

index.vue测试

 AxiosTest() {
      request({
        url: '/sys/login',
        method: 'post',
        data: {
          mobile: '13312345678',
          password: '123456'
        }
      })
    }

响应拦截器：判断解构数据是否异常，以及请求是否成功执行

// 响应拦截器
service.interceptors.response.use((response) => {
  const { data, message, success } = response.data
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    return Promise.reject(new Error(message))// 这里没有传入error，所以新建了一个Error对象,在传信息
  }
}, async(error) => {
  Message({ type: 'error', message: error.message })
  return Promise.reject(error)
})
export default service

总结

区分环境

created() {
    alert(process.env.NODE_ENV)
  }

请求模块

api.user.js里封装登录请求接口

import request from '@/utils/request'

export function login(data) {
  // return 以使用request产生的promise
  return request({
    url: '/sys/login',
    method: 'post',
    data// 简写，使用了传过来的数据 data:data
  })
}

store/user.js

import { login } from '@/api/user'
// 用来存放异步数据
const actions = {
  // context上下文，传入参数
  async login(context, data) {
    console.log(data)
    // 点击调用登录接口，成功执行await后的内容
    const token = await login(data)
    // 提交mutations里的数据，调用context里的默认方法
    context.commit('setToken', token)
  }
}

跳转主页

login/index.vue

methods: {
    login() {
      // 通过ref获取from表单元素，调用已有的validate方法，对整个表单进行校验
      this.$refs.form.validate(async(isOk) => {
        if (isOk) {
          // alert('快速通过')
          // 调用store/user.js里的actions里的异步方法login
          // vuex中的action返回的结果是promise，需要await
          // 有await说明执行成功，可以跳转主页，失败在axios封装时已经处理，无需再次考虑
          await this.$store.dispatch('user/login', this.loginForm)
          // 跳转主页,由router/index.js可知/表示主页
          this.$router.push('/')
        }
      }

      )
    }}

判断当前环境是生产还是开发

开发环境有数据，生产环境没有数据

 loginForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development'
      }

总结