一、路由拦截使用
首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面，路由配置如下：
const routes = [ { path: '/',name: '/''repository'Meta: { requireAuth: true,// 添加该字段，表示进入这个路由是需要登录的 },component: Repository },{ path: '/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' 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } { next(); } })
二、拦截器使用
要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response Inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。
http request 拦截器 axios.interceptors.request.use( config => { 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; },err => Promise.reject(err); }); http response 拦截器 axios.interceptors.response.use( response => response; },error =>if (error.response) { switch (error.response.status) { case 401: 返回 401 清除token信息并跳转到登录页面 store.commit(types.logoUT); router.replace({ path: 'login'return Promise.reject(error.response.data) 返回接口返回的错误信息 });
三、实例
/** * http配置 */ 引入axios以及element ui中的loading和message组件 import axios from 'axios' import { Loading,Message } from 'element-ui' 超时时间 axios.defaults.timeout = 5000 http请求拦截器 var loadinginstace axios.interceptors.request.use(config => { element ui Loading方法 loadinginstace = Loading.service({ fullscreen: true }) config },1)"> { loadinginstace.close() Message.error({ message: '加载超时' }) Promise.reject(error) }) http响应拦截器 axios.interceptors.response.use(data => { 响应成功关闭loading loadinginstace.close() data },1)"> { loadinginstace.close() Message.error({ message: '加载失败' Promise.reject(error) }) export default axios
如果你是使用了vux，那么在main.js这样使用：
Vue.prototype.$http.interceptors.response.use()
