前言

首先我并不是一个称职的前端开发，一直习惯性的实用jq开发，加上公司一直并没有跟上主流，导致前端技术非常的渣。正好最近有一个站点系统需要做，就是用了vue来开发。当前，借助于广大的互联网前端大大的经验才得以完成，这里只是讲一下拦截器，因为我们实用的路由需要权限处理，来源于互联网知识梳理。

如何实用路由拦截，怎样使用

首先我们会在router/index.js定义路由的时间会在配置中多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面，大致路由配置如下：

export const constantRouterMap = [ //首页展示 { path: '/', component: index, children: [{ path: '/', component: mainIndex, name: 'main', meta: { title: 'main',requireAuth:true} }] },  //登录注册页 { path: '/login', component: login, name: 'login', },]

等我们定义完路由后，我们需要利用vue-router提供的钩子函数beforeEach()对路由进行判断哪些可以访问哪些不可以访问：

router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.state.token) { // 通过vuex state获取当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); }})

要注意的地方：

index.js要引入` import router from '../router'`不然router.beforeEach会报错

拦截器的使用

为了方便统一处理所有http请求和响应，我们需要使用 axios 的拦截器。通过配置http response inteceptor，当后端接口返回10002 Unauthorized(未授权)或者登陆token已经过期，那么就需要让用户重新再登录。

// http request 拦截器axios.interceptors.request.use( config => { if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 拦截器axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 10002: // 返回 10002则证明token已经过期或者失效 则清除token信息并跳转到登录页面 store.commit(user.token); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的错误信息 });

实际运用

自己创建一个service.js文件用来处理请求拦截处理：

// 引入axios以及element ui中的loading和message组件 以及qs组件import axios from 'axios'import qs from 'qs'import { Message, MessageBox,Loading } from 'element-ui'import store from '@/store'import router from '../router'// create an axios instancevar loadinginstaceconst service = axios.create({ baseURL: 'https://www.phpassn.com', // api 请求的域名 这里举例子 timeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use( config => { if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.Authorization = `token ${store.state.token}`; } if (qs.stringify(config.data)) { config.data = qs.stringify(config.data) } // element ui Loading方法 loadinginstace = Loading.service({ fullscreen: true }) return config }, error => { loadinginstace.close() Message.error({ message: '加载超时' }) return Promise.reject(error) })// http响应拦截器 response interceptorservice.interceptors.response.use(response => { loadinginstace.close() const res = response.data if (res.errorno === 10002 ) { MessageBox.confirm('你已退出登陆，可以选择保留本页，或者重新登录', '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { store.dispatch('LogOut').then(() => { //执行退出登陆，清楚本地数据 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) }) }) } return response }, error => { loadinginstace.close() Message({ message: '加载失败', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) })export default service

这样我们就基本上完成来一个vue+axios的拦截请求，当前这里我只是使用固定写死的路由配置，每次新增路由都要重新打包一下，比较麻烦。但是我们可以使用动态路由来处理，当然我们可以同时对动态路由进行权限处理，这样我们就可以随意的控制我们的路由来，请继续关注后面文章～～～～