axios发送登录请求_Axios实现登录请求

Axios实现登录请求

Axios简介

基本使用

安装：npm install axios

全局引用： import axios from 'axios'

基本使用：

axios.get('/user', {

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

// 发送 POST 请求

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

});

实现登录请求

import axios from 'axios'

// 配置请求根路径

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

//拦截器，将没有token的路由拦下

axios.interceptors.request.use(config => {

// console.log(config)

config.headers.Authorization = window.sessionStorage.getItem('token')

return config

})

Vue.prototype.$http = axios

登录逻辑

login () {

//校验数据

this.$refs.loginFormRef.validate(async valid => {

if (!valid) return

//post请求接口，返回数据到data

const { data: res } = await this.$http.post('/login', this.loginForm)

//通过状态码判断

if (res.meta.status !== 200) return this.$message.error('登陆失败')

this.$message.success('登录成功')

// console.log(res)

window.sessionStorage.setItem('token', res.data.token)

this.$router.push('/home')

})

}

路由守卫

在路由发送之前，判断

如果是login路由，则放行

否则查看是否存在token,不存在token的话，跳转到login页面

// 路由守卫

router.beforeEach((to, form, next) => {

if (to.path === '/login') return next()

const tokenStr = window.sessionStorage.getItem('token') //

if (!tokenStr) return next('/login')

next()

})