vue的怎么在新建的axios.js拦截器文件里用vuerouter跳转

发布于 2022-09-07 16:06:26 字数 468 浏览 9 评论 0

新建的http.js设置拦截器,怎么在请求拦截器里判断未登录,然后用vue-router跳转到登录页面

import axios from 'axios'
import { Message } from 'element-ui'
import Router from 'vue-router'

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('请求呀')
    Router.push('/login')//这样用不对
    return config;
}, function (error) {
    // 对请求错误做些什么
    Message.error({message: '服务器故障', duration: 2000})
    return Promise.reject(error);
});

这样报错

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

木落 2022-09-14 16:06:26

在路由文件router.js中新建路由实例

//router.js
const router = new vueRouter({
    routes,
    mode: 'history',
    base: __dirname,
    ...
});
...
export default router;

在需要使用路由的地方引入router

//axios.js
import router from 'router.js';
router.push(link);
赤濁 2022-09-14 16:06:26

这里是不行的,用window.location.href来跳转

无所的.畏惧 2022-09-14 16:06:26

main.js文件
const rootVueObj = new Vue({

router: router,
render: h => h(App),

}).$mount('#app');
export default rootVueObj;

api文件
import rootVueObj from '../main.js';
拦截器里用rootVueObj代替this

夏九 2022-09-14 16:06:26

Axios 不适合做未登录的跳转
如果判断未登录最好的跳转方式是

import router from './router'

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判断是否有token
      // 其他的逻辑
    } else {
      next('/login') // 否则全部重定向到登录页
    }
  }
})
满意归宿 2022-09-14 16:06:26

axios.interceptors.response.use(
response => {

 if(response.data.code == "-999"){
    layer.msg("登录超时,请重新登录!")
     localStorage.clear();
     store.dispatch("add2")
     store.dispatch("del1")
     router.push({path: "/login"})
 }
return response;

},
error => {

  return Promise.reject(error)

});

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文