Vue 前端实现登陆拦截及axios 拦截器的使用

完整的方法见

 /src/http.js .

通过上面这两步，就可以在前端实现登录拦截了。 登出 功能也就很简单，只需要把当前token清除，再跳转到首页即可。

如果想实现登陆完成之后调回到之前想要进的页面 只需在登陆页的跳转处添加如下判断

if(!!this.$route.query.redirect){
  this.$router.push(this.$route.query.redirect)//这里是拦截前想跳转的页面
 }else{
  this.$router.push('/home')//这里填你默认跳转的地址
  }

ps：下面看下vue的axios拦截器使用

axios拦截器

下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。

下面是一个为axios添加请求loading的例子：

添加请求拦截器

//定义一个请求拦截器
axios.interceptors.request.use(function(config){
 Vue.$vux.loading.show(); //在请求发出之前进行一些操作
 return config
},function (error) {
 　　// 对请求错误做些什么
 // return Promise.reject(error)
});

添加响应拦截器

//定义一个响应拦截器
axios.interceptors.response.use(function(config){
 Vue.$vux.loading.hide();;//在这里对返回的数据进行处理
 return config
},function (error) {
 　　// 对请求错误做些什么
 // return Promise.reject(error)
});

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

某一个函数不希望受到全局拦截器的影响

解决方法：在函数内从新添加一个拦截器

如下：为请求函数添加一个新的拦截器使之不受全局拦截器影响

const $ajax = this.$http.create()

例：下面函数不受全局拦截器影响

pollopenid(){
  const $ajax = this.$http.create()
  $ajax({
  method:'post',
  url:'',
  data:{
  }
  }).then(res=>{
  })
 }

总结

以上所述是小编给大家介绍的Vue 前端实现登陆拦截及axios 拦截器的使用,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！