vue-route 的 beforeEach 实现导航守卫

最新推荐文章于 2025-03-03 16:58:00 发布

watts_j

最新推荐文章于 2025-03-03 16:58:00 发布

阅读量415

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔&笔记

本文链接：https://blog.youkuaiyun.com/qq_33559093/article/details/85631902

随笔&笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个结合进度条、权限验证和路由导航的前端框架实现方案。通过使用Vue.js的路由模块，结合NProgress进度条组件，实现了页面加载时的进度显示。同时，引入了权限验证机制，利用store和auth模块，确保只有拥有有效token和权限信息的用户才能访问特定路由，对于无权限的路由请求，将重定向至登录页面。

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

路由导航，一般会搭配权限设置和验证信息

import router from './router'
import NProgress from 'nprogress' //  进度条
import store from '@/store'
import 'nprogress/nprogress.css'
import { getCookieToken, getUserPower } from '@/utils/auth'
import addRouter from '@/router/addPowerRoute'

const whiteList = ['/', '/authredirect', '/stopserver']// 不重定向白名单

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (!getCookieToken()) {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next({ path: '/' }) // 否则全部重定向到登录页
      NProgress.done()
    }
  } else {
    //  有token信息
    if (getUserPower()) {
      //  有权限信息
      if (store.getters.addRouters.name) {
        //  有正确的路由，直接进入，最终入口
        next()
      } else {
        //  无路由信息，需要去设置路由权限信息
        store.dispatch('getRouteList', getUserPower()) // 设置权限
        // store.commit('SET_POWERROUTE', getUserPower())
        addRouter(store.getters.addRouters)
        next({ ...to, replace: true })//  循环
      }
    } else {
      next({ path: '/' }) // 否则全部重定向到登录页
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

其中包括两重验证：1，cookie中token的时效性；2，权限