vue3+ts的权限路由配置

admin管理员组

文章数量:1634004

1、构建项目，配置vite和tsconfig.json---主要是@的配置

 2.配置入口函数--main.ts--主要是配置UI框架和pinia

提前安装element-plus和pinia

3.构建公共组件 （主要是home页面的头部和路由栏，以及出口路由栏main）

4.构建路由组件以及403组件和home父组件（路由组件都在父组件中实现）

 5.权限路由方法（最重要的步骤）

5.1 配置sotre 

import { defineStore} from 'pinia'

export const mainStore = defineStore('main',{
  state:()=>{
    return {
        cookies:localStorage.getItem("cookies"),
        permissions:<any>localStorage.getItem("permissions")
    }
  },
  getters:{
    isAuthenticated():boolean{
        return !!this.cookies
    }
},
  actions:{
    login(data:any,cookies:any) {
        localStorage.setItem("permissions",data)
          
    },
    loginout() {
        console.log(this.permissions)
    }
}
})

5.2 配置utils中的方法（用来过滤权限和使用）

import route from "@/router/modules/routes"
export function filterRoutes(routes: any[],permissions: any[]) {//传入路由和权限数组
  console.log(routes,permissions)
  const result = []
  const cookies=localStorage.getItem("cookies")
  if(!cookies) {
    return []
  }

  for (const route of routes) {
    if (route.meta && route.meta.permission) {
      // 如果路由对象有 meta.permission 属性，则需要进行权限判断
      if (permissions.includes(route.meta.permission)) {
        // 如果当前用户的权限包含路由对象的 permission，则将路由对象添加到结果数组中
        result.push(route)
      }
    } else {
      // 如果路由对象没有 meta.permission 属性，则表示该路由无需权限控制，直接添加到结果数组中
      result.push(route)
    }
    if (route.children) {
      // 如果当前路由对象包含子路由，则需要递归调用 filterRoutes 函数过滤子路由
      const children = filterRoutes(route.children, permissions)
      if (children.length > 0) {
        result[result.length - 1].children = children
      }
    }
  }
  return result
}

export function Judgment(path:string) {//过滤权限，是否能访问，没的权限的反馈false
  const  Judgment: string[] = []
    for (const  i of route[0].children) {
      Judgment.push(i.path);
    }
  const Judgments = Judgment.map((e) => {
    return `/home/${e}`
  })
  return Judgments.includes(path)
}

5.3 在router路由下创建权限路由数组

import { RouteRecordRaw } from 'vue-router';

//权限路由
const routes: RouteRecordRaw[]= [ 
    {
      path: '/home',
      component: () => import('@/views/home.vue'),
      redirect: '/home/genRules',
      children: [
        {
          path: 'genRules',
          name: 'genRules',
          meta: {
            title:"生成规则",
            permission:1,
            icon:'HomeFilled'
          },
          component:() => import('@/views/genRules.vue')
        },
        {
          path: 'rules',
          name: 'rules',
          meta: {
            title:"规则",
            permission:2,
            icon:"Menu"
          },
          component:  () => import('@/views/rules.vue'),
          props:true,
        },
        {
          path: 'rulesv2',
          name: 'rulesv2',
          meta: {
            title:"v2规则",
            permission:3,
            icon:'Menu'
          },
          component: () => import('@/views/rulesV2.vue'),
          props:true,
        },
        {
            path:"visualization",
            name:"visualization",
            meta: {
                title:"规则数据",
                permission:4,
                icon:'Histogram'
              },
            component:()=>import("@/views/visualization.vue"),
        },
        {
          path:'user',
          name:"user",
          meta: {
            title:'用户管理',
            permission:5,
            icon:'User'
          },
          component:()=>import("@/views/user.vue")
        }
      
      ]
    }
  ];
  export default routes

5.4并在router的index路由权限中使用构建的过滤方法以及store和路由权限

import { mainStore } from '@/store/index';
import route from "@/router/modules/routes";
import { filterRoutes, Judgment } from '@/utils/authorization';
import {createRouter, createWebHashHistory} from "vue-router";
import {createPinia} from "pinia"
const pinia = createPinia();
const routes = [
    {
        name:"login",
        path:"/login",
        component:() => import("@/views/login.vue")
    },
    {
        name:'403',
        path:"/403",
        component:() => import("@/views/403.vue")
    },
    {
        path:"/",
        redirect:'/home'
    },
]
const router =createRouter({
    history:createWebHashHistory(),
    routes:routes,
})
const getAuthState = () => {//转存store的数据
    const authStore = mainStore(pinia)
    return {
      cookies: authStore.cookies,
      isAuthenticated: authStore.isAuthenticated,
      permissions: authStore.permissions,
    }
  }
let hasRoles = true//控制权限路由是否导入
router.beforeEach((to, from, next) => {
    const { cookies, isAuthenticated,permissions} = getAuthState()
    const dynamicRoutes = filterRoutes(route, permissions)//过滤权限
    const statusPower=Judgment(to.path)//权限控制
    
    // 动态添加路由
    if (hasRoles) {
      for (const route of dynamicRoutes) {
        router.addRoute(route) 
      }
      hasRoles = false
      router.push({ ...to, replace: true })//防止路由注入失效
      return
    }
    if (to.path === '/login') {
      if (isAuthenticated && cookies) {
        next('/');
      } else {
        next();
      }
    } else {
      // 如果目标路由不是 403 页面，则进行权限控制
      if (to.path !== '/403' && statusPower === false) {
        next('/403');
        return;
      }
      if (isAuthenticated && cookies) {
        next();
      } else {
        next('/login');
      }
    }
  
  })
export default router

代码仓库链接：https://gitee/goodkat/router-permissions

本文标签： 路由权限ts