后台管理系统vue3 权限
时间: 2023-09-15 21:21:46 浏览: 62
在后台管理系统中,权限分为功能级权限和数据级权限。功能级权限是指用户在系统中可以执行的具体功能,如增删改查等。而数据级权限则是指用户对数据的操作权限,比如某个用户只能查看自己的数据而不能查看其他用户的数据。
在Vue 3的后台管理系统中,一般会通过后端返回功能权限的方式来实现权限控制。登录成功后,后端会返回功能权限,最好是路由配置的形式,前端可以把功能权限处理成路由配置的JSON数组格式。然后使用`vue-router`对象的`addRoutes`方法将该路由配置动态添加到路由对象中。同时,为了防止前端刷新后丢失路由配置,可以将该路由配置保存到`sessionStorage`中。
以下是一个实现的示例代码:
```javascript
// 默认路由配置里只有登录的配置
import Vue from 'vue';
import VueRouter from "vue-router";
import Login from "@/pages/Login";
Vue.use(VueRouter); // 安装vue-router到Vue
// 创建vue-router对象
let router = new VueRouter({
mode: "hash", // 路由模式
routes: [
{ path: "/", redirect: "/Login" },
{ path: "/Login", component: Login }
]
});
export default router;
```
在登录成功后,可以使用`axios`等库向后端发送请求,获取到用户的权限信息。然后根据后端返回的权限,生成该用户对应的路由配置。通过过滤所有路由配置,只保留用户有权限访问的路由配置,得到`currRoutes`。然后将获取到的权限保存到`sessionStorage`中,并将获取到的权限动态添加到`vue-router`对象中。最后,使用`this.$router.push("/Home")`跳转到首页或指定页面。
请注意,这只是一个示例代码,实际的权限控制可能需要更多的细节和逻辑处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [后台管理系统的权限以及vue处理权限的思路](https://blog.csdn.net/sdasadasds/article/details/126665717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)