记录一个permission路由守卫

最新推荐文章于 2024-07-25 17:07:52 发布

tsukuru

最新推荐文章于 2024-07-25 17:07:52 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

文章标签： ui 前端 javascript

本文链接：https://blog.youkuaiyun.com/tsukuru/article/details/129090376

本文介绍了如何在前端实现路由权限控制。首先通过方法检查用户登录状态，若已登录则获取用户角色信息，若未获取则拉取并更新。依据角色信息生成可访问路由表，并更新到路由中。未登录用户，若访问的页面不在免登列表，会被重定向到登录页，并携带原目标页面信息。

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

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/auth-redirect', '/bind', '/register']

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          const roles = res.roles
          store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
          // 测试 默认静态页面
          // store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRou