axios接口封装

Fleshy°

已于 2022-07-26 10:43:38 修改

阅读量466

点赞数

文章标签： vue.js javascript 前端

于 2022-07-26 10:43:10 首次发布

本文链接：https://blog.youkuaiyun.com/FleshyAPP/article/details/125989898

版权

该博客介绍了如何在Vue.js应用中进行Axios的配置，包括设置默认请求域名、响应拦截器中的进度条显示与隐藏。此外，还展示了登录功能的实现，包括登录验证、保存token到sessionStorage及编程式导航。同时，提到了路由导航守卫的使用，确保未登录用户无法访问特定页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios接口封装

1. main.js

//默认请求域名
axios.defaults.baseURL = “xxx”
//在response拦截器中展示进度条NProgress.start()
axios.interceptors.request.use((config) => {
// console.log(config)
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})
// 在response拦截器中, 隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
//挂载到vue实例上
Vue.prototype. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots'0') return `$ {y}- ${m}-$ {d} ${hh}:$ {mm}😒{ss}`
})

1.1 在组件中使用Login.vue

// 登录按钮的验证
login () {
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots} = await this.$ http.post(“login”, this.loginForm)
if (res.meta.status !== 200) {
// return console.log(‘登录失败!’)
this. $KaTeX parse error: Expected 'EOF', got '}' at position 32: \dots录失败!') }̲ else { \dots$ message.success(‘登录成功!’)
//将登录成功之后的token保存到客户端的sessionStorage中
//项目除了登录之外的其他API接口，必须在登录之后才能访问
//token只在当前网站打开期间生效，所以将token保存在sessionStorage中
console.log(res)
//保存token到sessionStorage中
window.sessionStorage.setItem(“token”, res.data.token)
//通过编程式导航跳转到后台主页，路由地址是/home
this.$router.push(‘/home’)
}

  })
}


`async` 内部可以使用 `await`，也可以不使用。
`async` 函数的返回值是一个 `Promise` 对象，因此执行这个函数时，可以使用 `then` 和 `catch` 方法。
根据 **函数体内部** 的返回值， `async` 函数返回值具体情况如下：

- 函数体内不返回任何值，则 `async` 函数返回值为一个成功（`fulfilled`）的 `Promise` 对象，状态值为 `undefined`。

  ```js
  let a = async function() {}
  let res = a()
  console.log(res)
  // Promise{<fullfilled>: undefined}

router.js路由导航守卫

`//为路由对象挂载路由导航守卫beforeEach
router.beforeEach((to, from, next) => {
//to:将要访问的路径
//from:代表从哪个路径跳转而来
//next:是一个函数，代表放行
//next();放行，next(‘/login’)表示强制跳转
//如果用户访问的登录页,直接放行
if (to.path === ‘/login’) return next()
//获取token
const tokenStr = window.sessionStorage.getItem(‘token’)
//没有token强制跳转到登录页
if (!tokenStr) return next(‘/login’)
next()

})