vue+axios 前端实现登录路由拦截

最新推荐文章于 2023-12-05 22:35:39 发布

原创

最新推荐文章于 2023-12-05 22:35:39 发布 · 548 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#路由拦截

本文介绍了如何在Vue项目中实现路由拦截，确保只有登录的用户才能访问特定路由。通过在路由定义中添加requireAuth字段，并使用vue-router的beforeEach钩子函数进行判断。同时，利用axios的拦截器处理401未授权状态，当接收到401时引导用户重新登录。

一、路由拦截
在定义路由的时候需要添加一个自定义字段 requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。
在这里插入图片描述
二、拦截器
定义完路由后，我们主要是利用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();
}

})

⚠️注意：确保要调用 next 方法，否则钩子就不会被 resolved。
要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。main.js:
在这里插入图片描述
路由验证用 router.beforeEach( (to, from, next) => { }
这里的to代表要去的路由指向，
from是指从哪个路由跳转过来的，
next是判断操作，如果为空，表示放行。