vue3+vue-router+vuex+ts实现权限管理

最新推荐文章于 2024-10-14 10:25:01 发布

_Carpediem

最新推荐文章于 2024-10-14 10:25:01 发布

阅读量1.8k

点赞数 1

分类专栏： frontend 文章标签： javascript vue.js typescript

本文链接：https://blog.csdn.net/qq_40420929/article/details/121671462

版权

本文介绍了如何使用Vue3、vue-router、vuex和typescript来实现权限管理，包括路由权限、页面权限和按钮权限。重点展示了路由权限的实现，并给出了router.ts和store.ts的相关源码。

摘要由CSDN通过智能技术生成

一、说明

权限管理一般从路由权限、接口权限、页面权限、按钮权限四个角度去考虑。

我基于业务需求，实现了路由权限、页面权限、按钮权限。以下主要展示路由权限。

tips:（页面权限和按钮权限需要在具体的页面or按钮中去实现；接口权限需要和后端去协商约定实现）

二、实现思路+源码：

1.router.ts

import store from "@/store/index";
import {
    createRouter, createWebHashHistory } from "vue-router";
import {
    AUTHORITY, ROLE } from "@/utils/constant";
const routerHistory = createWebHashHistory();
//配置路由列表
const router = createRouter({
   
  history: routerHistory,
  routes: [
    {
   
      path: "/",
      redirect: "/log-in",
    },
    {
   
      path: "/test",
      component: Test,
    },
    {
   
      path: "/log-in",
      component: LogIn,
    },

    {
   
      path: "/account",
      component: Home,
      children: [
        {
   
          path: "personal",
          component: PersonalCenter,
        },
        {
   
          path: "authority",
          compone