admin管理员组文章数量:1633824
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
版权声明:本文标题:vue3+ts的权限路由配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729175763a1188693.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论