Vue2 경로 탐색 후크 및 Axios 인터셉터를 캡슐화하는 방법
- php中世界最好的语言원래의
- 2018-05-25 14:26:351228검색
이번에는 Vue2 라우팅 및 탐색 후크와 Axios 인터셉터를 캡슐화하는 방법과 Vue2 라우팅 및 탐색 후크 및 Axios 인터셉터를 캡슐화하는 데 참고사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.
1.앞에 작성
최근에 Vue2를 배우고 있는데 일부 페이지에서 데이터를 요청하려면 사용자 로그인 권한이 필요하고 서버 응답이 예상과 다른데 처리할 수 없는 문제가 발생했습니다. 각 페이지가 따로 있어서 axios가 인터셉터라는 좋은 기능을 제공하는구나 하는 생각이 들었고, 그러다가 이런 글이 나왔습니다.
2. 특정 요구사항
사용자 인증 및 리디렉션: Vue
요청 데이터 직렬화: axios
에서 제공하는 요청 인터셉터 사용: 인터페이스 오류 정보 처리: 사용 axios
3. 간단한 구현
3.1 라우팅 및 탐색 후크 수준에서 인증 및 리디렉션 캡슐화
라우팅 및 탐색 후크의 모든 구성은 여기 router/index.js에 있습니다. are some Code
import Vue from 'vue'
import Router from 'vue-router'
import { getUserData } from '@/script/localUserData'
const MyAddress = r => require.ensure([], () => r(require('@/views/MyAddress/MyAddress')), 'MyAddress')
Vue.use(Router)
const routes = [
{
path: '/profile/address',
name: 'MyAddress',
component: MyAddress,
meta: {
title: '我的地址',
requireAuth: true
}
},
// 更多...
]
const router = new Router({
mode: 'history',
routes
})
아래의 논리적 처리 부분의 코드를 중심으로 살펴보겠습니다
let indexScrollTop = 0
router.beforeEach((to, from, next) => {
// 路由进入下一个路由对象前，判断是否需要登陆
// 在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理
if (to.matched.some(res => res.meta.requireAuth)) {
// userData为存储在本地的一些用户信息
let userData = getUserData()
// 未登录和已经登录的处理
// getUserData方法处理后如果userData.token没有值就是undefined，下面直接判断
if (userData.token === undefined) {
// 执行到此处说明没有登录，君可按需处理之后再执行如下方法去登录页面
// 我这里没有其他处理，直接去了登录页面
next({
path: '/login',
query: {
redirect: to.path
}
})
} else {
// 执行到说明本地存储有用户信息
// 但是用户信息是否过期还是需要验证一下滴
let overdueTime = userData.overdueTime
let nowTime = +new Date
// 登陆过期和未过期
if (nowTime > overdueTime) {
// 登录过期的处理，君可按需处理之后再执行如下方法去登录页面
// 我这里没有其他处理，直接去了登录页面
next({
path: '/login',
query: {
redirect: to.path
}
})
} else {
next()
}
}
} else {
next()
}
if (to.path !== '/') {
indexScrollTop = document.body.scrollTop
}
document.title = to.meta.title || document.title
})
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0
} else {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop
})
}
})
export default router
이 시점에서 Routing Hook 수준의 인증 처리가 완료되는데, 주의 깊게 보면 다음과 같은 쿼리가 있다는 것을 알 수 있습니다. 로그인 페이지로 이동할 때 호출되는 다음 메서드의 개체입니다. 로그인 성공 후 대상 페이지로 리디렉션해야 하기 때문에 대상 경로의 주소가 전달됩니다.
3.2 Axios 인터셉터 캡슐화
Axios의 모든 구성은 script/getData.js 파일에 있습니다. 다음은 이 파일의 공개 코드 부분입니다.
"
import qs from 'qs'
import { getUserData } from '@/script/localUserData '
import router from '@/router '
import axios from 'axios'
import { AJAX_URL } from '@/config/index '
axios.defaults.baseURL = AJAX_URL
> axios请求拦截器代码
"
/**
* 请求拦截器，请求发送之前做些事情
*/
axios.interceptors.request.use(
config => {
// POST || PUT || DELETE请求时先格式化data数据
// 这里需要引入第三方模块qs
if (
config.method.toLocaleUpperCase() === 'POST' ||
config.method.toLocaleUpperCase() === 'PUT' ||
config.method.toLocaleUpperCase() === 'DELETE'
) {
config.data = qs.stringify(config.data)
}
// 配置Authorization参数携带用户token
let userData = getUserData()
if (userData.token) {
config.headers.Authorization = userData.token
}
return config
},
error => {
// 此处应为弹窗显示具体错误信息，因为是练手项目，劣者省略此处
// 君可自行写 || 引入第三方UI框架
console.error(error)
return Promise.reject(error)
}
)
axios 응답 인터셉터 코드
/**
* 响应拦截器，请求返回异常统一处理
*/
axios.interceptors.response.use(
response => {
// 这段代码很多场景下没用
if (response.data && response.data.success === false) {
// 根据实际情况的一些处理逻辑...
return Promise.reject(response)
}
return response
},
error => {
// 此处报错可能因素比较多
// 1.需要授权处用户还未登录，因为路由段有验证是否登陆，此处理论上不会出现
// 2.需要授权处用户登登录过期
// 3.请求错误 4xx
// 5.服务器错误 5xx
// 关于鉴权失败，与后端约定状态码为500
switch (error.response.status) {
case 403:
// 一些处理...
break
case 404:
// 一些处理...
break
case 500:
let userData = getUserData()
if (userData.token === undefined) {
// 此处为未登录处理
// 一些处理之后...再去登录页面...
// router.push({
// path: '/login'
// })
} else {
let overdueTime = userData.overdueTime
let nowTime = +new Date
if (overdueTime && nowTime > overdueTime) {
// 此处登录过期的处理
// 一些处理之后...再去登录页面...
// router.push({
// path: '/login'
// })
} else {
// 极端情况，登录未过期，但是不知道哪儿错了
// 按需处理吧...我暴力回到了首页
router.push({
path: '/'
})
}
}
break
case 501:
// 一些处理...
break
default:
// 状态码辣么多，按需配置...
break
}
return Promise.reject(error)
}
)
읽고 나면 마스터하셨을 것입니다. 이 기사의 사례 방법에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
vue의 내장 구성 요소 사용 단계에 대한 자세한 설명
위 내용은 Vue2 경로 탐색 후크 및 Axios 인터셉터를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!