在vue项目中发送axios.ajax请求步骤

下包

npm i axios

导包

在main.js里输入这行代码

import axios from “axios”

配置请求的基准URL地址

axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’ 文档基准

axios设置请求拦截器

快捷键 axios-config-interceptors

只要发送ajax请求之前,就会经过拦截器绑定token
拦截器分两种,请求拦截,响应拦截, 请求拦截是你点击后发送ajax之前给你进行包装
/另一种是响应来了之后马上做的事情.推荐用请求拦截
举个栗子
注意在这个表单头Authorization进行token绑定,项目中会经常用到哦

axios.interceptors.request.use(
  config => {
//注意在这个表单头Authorization进行token绑定
    config.headers.Authorization = sessionStorage.getItem('token')
    return config
  },
  err => {
    console.log(err)
  }
)

//注意在这个表单头Authorization进行token绑定

最后

定义http

Vue.prototype.$http=axios

以上都是在main.js里的操作

---

接下来

发送axios.ajax

在某个事件里发送axios.ajax
/看到ajax就要给 async 和await 嵌套地狱 promise 宏任务和微任务
async 事件名字 比如this.$refs.formRef.validate(async valid => {

针对不同事件对应post,get,delete,put, 第一个是路径,第二个是参数
const { data: res } = await this.$http.post(’/login’, this.loginForm)
console.log(res)

//根据回调回来的res来进行判断
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)

//将回调回来的res的token进行存储
window.sessionStorage.setItem(‘token’, res.data.token)

//通过路由跳转到指定的页面
this.$router.push(’/home’)

关于路由导航守卫

首先路由导航守卫可以效验你是否有token,如果有则放行,如果没有,则跳转回原页面,也可以通过实际业务需求去向服务器发送请求进行效验validate,

此项绑定在router文件夹index.js里,在路由都绑定好后 ,导出之前进行挂载

const router = new VueRouter({
  routes
})
// 挂载路由守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects. must call `next`.
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})
// router.beforeEach((to, from, next) => {
//   if (to.path === '/login') return next()
//   const token = window.sessionStorage.getItem('token')
//   if (!tokenStr) return next('/login')
// })
export default router

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫,这个后面慢慢学

注意路由导航的使用位置,在创建之后,在暴露之前

const router = new VueRouter({
  routes
})
在router-index.js里挂载路由导航守卫
所有的路由跳转时都会经过这个前置守卫函数的处理
场景:一些有权限的组件,需要经过验证
	before 前  each每一个
to 从哪来 form 从 next 放行
(to) => // 到哪个页面去？ (from) => // 从哪个页面来？
导航守卫只能判断token是否存在,不能判断是否合法,
router.beforeEach((to,from,next)=>{          此次挂载是在路由,所以主要发生在跳转的时候
if(to.path==="/login") next()      如果你现在是去/login里面那么可以直接跳转
const token=sessionStorage.getItem("token")         我把你的token设置成一个变量看是否为空
if(!token) return next('/login')		token为空就为否
next()            放行
})

export default router