date
Sep 7, 2024 01:54 AM
type
status
slug
summary
tags
category
updated
Sep 7, 2024 03:42 AM
icon
password
前言
这篇文章是写给刚入门Vue框架开发或者刚入门的同学，权限管理是基本上每一个项目都会遇到问题，你有登陆，有游客等身份，你总要不同的身份会有不同的网页访问吧。下面就实现从想法到权限管理的构建。
必备条件
- Vue3 项目开发语言基础了解
- Vue-router 路由管理基础了解
- Pina 状态管理器基础了解
- 首先执行创建工程语句
这样就得到了一个vue3+vite项目。
- 安装路由、状态管理器以及持久化插件
这个目的是存储我们的用户信息和当前的路由表
大致想法
这样的话就完成了用户的基础路由权限设计。
操作演示
实际的路由表的更新主要是通过
addRoute 和 removeRoute 来控制。- 在
src/pages下面新建admin.vuecustom.vueerror.vuehome.vueuser.vue。分别写入页面名称就行。例如amdin.vue页面内容。
- 在
src/store中新建permission.ts写入下面的内容
在
src/store 中新建 user.ts 写入下面的内容- 可以对路由文件进行划分，这样会显得目录清晰。例如我建立了
admincustomuser。三个私有路由的文件，然后导入了一个文件中再合并成一个私有路由参数。当然你可以分的更细致，我这里只做个demo
例如
src/router/admin.ts 内容如下- 在路由总文件处注册路由
src/router/index.ts。 - 导入私有路由的组合和公共路由
- 使用
createRouter创建路由 - 编写全局路由功能:跳转前，看是路由是否存在
- 抛出修改路由表的方法
这个文件大致要做4件事，当然你也可以细致的分划一下。
那么他的具体内容如下
如果仅仅只是上面的操作的话，那么会出现用户切换了身份，路由更新了，但是点击对应的页面，他没法跳转。以及刷新的时候，路由表还没更新到当前用户的路由表，会无法访问具体的私有路由页面。
- 这里就是通过App.vue里的逻辑来改造上面描述的问题。当然里面的函数和方法你也可以封装和优化。
代码上有详细的解释。其实原理很简单，主要是踩的坑会比较麻烦。
功能权限控制
上面一块是大的页面权限的控制，那么同一个身份下的用户，有不同的功能。对于功能也是需要区分开的。
想法
通过指令来决定当前的这个dom是不是要渲染，如果身份不对就不渲染。不渲染你想点击也没法点。
那么下面就简单的给出部分代码
新建一个指令文件夹，编写
permission指令代码后面就是注册到app上。当然了最好是弄一个单独的文件，然后统一的注册。单独注册的语法如下
app.directive("permission", permission); 我这里就省略了，具体可以看源码那么使用的话就只需像如下的
admin.vue页面一样源码以及效果
效果就是，你切换对应的身份，那么他身份下的路由页面，你可以访问，相反的不是他的路由页面，你只能访问到
/error 页面。当然你可以不用动态路由的方法来实现，你也可以仅仅通过全局理由beforeEach来判断当前要去的页面是否能被访问
vue3-router-permission
HideInMatrix • Updated Sep 7, 2024