前后端分离：前端鉴权路由拦截（技术栈：vue）

最新推荐文章于 2025-06-02 09:02:48 发布

哆啦Ci梦

最新推荐文章于 2025-06-02 09:02:48 发布

阅读量792

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发（python+vue前后端分离） vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/u010046615/article/details/120366749

web开发（python+vue前后端分离）同时被 2 个专栏收录

5 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文探讨了在Vue.js项目中实现前端路由鉴权的方法，通过预加载拦截器检查用户登录状态。当用户无token或者token过期时，进行路由拦截，防止未授权访问。后端采用Flask框架进行配合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要参考：Vue--系统权限拦截 - 邹邹很busy。 - 博客园

用于实现未登录页面（没有token or token过期）的路由拦截。后端用flask实现。

项目结构：

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'
import axios from "axios";
import store from "./store/store";
import router from "./router";
// 权限拦截，全局的
import './premission'
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

premission.js

// 权限校验，要在main.js文件里导入才会有效

/*
Vue Router中的前置钩子函数beforeEach(to, from, next)
当进行路由跳转之前，进行判断是否已经登录过，登录过则允许访问非登录页面，否则，回到登录页面
to：即将要进入的目标路由对象
from：即将要离开的路由对象
next：是一个方法，可以指定路由地址，进行路由跳转
*/

import router from './router'  // 所有的路由跳转都是在这个里面的
// 获取校验token的接口，自己实现
import { GetUserInfo} from "@/api/login"; // 导入获取用户信息的方法

router.beforeEach((to, from, next)=>{
    // 获取token
    const token = localStorage.getItem('userToken')

    if(!token){
        // 如果没有获取到，要访问非登录页面，则不让访问，回到登录页面 /login
        if(to.path === '/login'){
            next() // 等价于 next({path: '/login'})，会自动获取到上面的路由
        }else if(to.path === '/register'){// 注册页面
            //
            next({path: '/register'})
        }else{
            // 请求登录页面

            next({path: '/login'})
        }
    }else{
        // 获取到token，
        // 请求路由是/login，则去目标路由
        if(to.path === '/login'){
            next()
            // 请求路由是/register，则去register
        }else if(to.path === '/register'){
            next()
        }
        else{ //如果有token则验证token是否过期，如过期，还是回到login页面
            GetUserInfo().then((response) => {
                // console.log(response);
                const res = response.status;
                if (res===200) {
                    next()
                } else {
                    next({path: '/login'})
                }
            });

        }
    }
})