用户名和密码
解决跨域问题
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'
}