Vue2 라우팅 탐색 및 Axios 인터셉터 패키징
- php中世界最好的语言원래의
- 2018-04-28 16:06:172043검색
이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!