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 requeststimeout: 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，要使用configif (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.dataif (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产生的promisereturn 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)}
}

跳转主页

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'}