Axios实现登录请求

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()
})