权限管理Vue实现

1.网站开发中为什么必要权限控制

掩护敏感信息：确保只有授权用户才华访问特定命据。
增强安全性：防御未经授权的访问和其他安全威胁。
满意合规要求：服从相干法律法规，如处理处罚个人或财务信息的规定。
提拔用户体验：为差别脚色定制化访问和服务，简化界面。
支持多脚色操纵：答应基于用户脚色分配差别的访问级别和功能。
防止误操纵：限定关键操纵仅限于指定职员实行，镌汰错误风险。
审计追踪：记任命户活动以便查察和题目排查。
维护数据同等性：防止未经授权的数据修改，保持数据正确性和完备性。
2.下载Pinia

npm install pina
3.设置Pinia

1. import { createPinia } from 'pinia'

复制代码

1. const pinia = createPinia()
2. app.use(pinia)

复制代码

4.新建store文件夹,创建user文件设置权限列表

1. // src/stores/user.js
2. import {defineStore} from 'pinia'
4. export const useUserStore = defineStore('user', {
5.    state: () => ({
6.        role: 'guest', // 默认角色为访客
7.        menus: [
8.            {name: '主页', path: '/', permission: ['guest', 'user', 'admin']},
9.            {name: '用户面板', path: '/dashboard', permission: ['user', 'admin']},
10.            {name: '管理员面板', path: '/admin', permission: ['admin']},
11.            {name: ' 产品管理', path: '/product', permission: ['admin']}
12.        ]
13.    }),
14.    getters: {
15.        accessibleMenus: (state) => {
16.            return state.menus.filter(menu => menu.permission.includes(state.role));
17.        }
18.    },
19.    actions: {
20.        setRole(role) {
21.            this.role = role;
22.        }
23.    }
24. })

复制代码

5.创建router.js文件设置路由

1. // src/router/index.js
2. import {createRouter, createWebHistory} from 'vue-router'
3. import Home from '../views/Home.vue'
4. import Dashboard from '../views/Dashboard.vue'
5. import AdminPanel from '../views/AdminPanel.vue'
6. import Product from '../views/ProductManager.vue'
7. import {useUserStore} from '../store/user'
9. const routes = [
10.    {path: '/', component: Home},
11.    {path: '/dashboard', component: Dashboard, meta: {requiresAuth: true, roles: ['user', 'admin']}},
12.    {path: '/admin', component: AdminPanel, meta: {requiresAuth: true, roles: ['admin']}},
13.    {path: '/product', component: Product, meta: {requiresAuth: true, roles: ['admin']}}
14. ]
16. const router = createRouter({
17.    history: createWebHistory(),
18.    routes
19. })
21. router.beforeEach(async (to, from, next) => {
22.    const userStore = useUserStore()
24.    if (to.matched.some(record => record.meta.requiresAuth)) {
25.        if (!to.meta.roles.includes(userStore.role)) {
26.            next({path: '/'})
27.        } else {
28.            next()
29.        }
30.    } else {
31.        next()
32.    }
33. })
35. export default router

复制代码

6.创建vue所需组件

• 首页组件
  

1. <script setup>
2. import { onMounted, ref } from 'vue'
3. import axios from "axios";
5. // 定义产品列表
6. const products = ref([])
8. // 获取所有产品
9. const getProducts = async () => {
10. try {
11.    const response = await axios.get('http://localhost:8080/api/product/getAll');
12.    products.value = response.data;
13. } catch (error) {
14.    console.error('获取产品列表时出错:', error);
15. }
16. };
18. onMounted(() => {
19. getProducts();
20. })
21. </script>
23. <template>
24. <div class="product-page">
25.    <!-- 展示产品列表 -->
26.    <section class="product-list-section">
27.      <h2>我们的产品</h2>
28.      <ul class="product-list">
29.        <li v-for="product in products" :key="product.id" class="product-item">
30.          <img :src="product.image" alt="产品图片" class="product-image">
31.          <div class="product-info">
32.            <h3>{{ product.content }}</h3>
33.            <p>{{ product.addTime }}</p>
34.          </div>
35.        </li>
36.      </ul>
37.    </section>
38. </div>
39. </template>
41. <style scoped>
42. .product-page {
43. font-family: 'Microsoft YaHei', Arial, sans-serif;
44. text-align: center;
45. background-color: #f4f4f4;
46. }
48. .product-list-section {
49. padding: 50px 20px;
50. }
52. .product-list {
53. list-style-type: none;
54. padding: 0;
55. display: flex;
56. flex-wrap: wrap;
57. justify-content: center;
58. }
60. .product-item {
61. background-color: white;
62. margin: 10px;
63. border-radius: 10px;
64. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
65. width: 300px;
66. overflow: hidden;
67. transition: transform 0.3s ease-in-out;
68. }
70. .product-item:hover {
71. transform: scale(1.05);
72. }
74. .product-image {
75. width: 100%;
76. height: auto;
77. border-top-left-radius: 10px;
78. border-top-right-radius: 10px;
79. }
81. .product-info {
82. padding: 15px;
83. }
85. .product-info h3 {
86. margin-top: 0;
87. font-size: 1.2em;
88. color: #333;
89. }
91. .product-info p {
92. font-size: 1em;
93. color: #666;
94. }
95. </style>

复制代码

• 面板组件
  

1. <script setup>
2. import { onMounted, computed } from 'vue'
3. import { useUserStore } from '../store/user'
5. const userStore = useUserStore()
7. // 使用计算属性获取角色信息
8. const role = computed(() => userStore.role)
10. onMounted(() => {
11. // 在组件挂载时可以执行一些初始化操作
12. })
13. </script>
15. <template>
16. <div class="dashboard">
17.    <header class="dashboard-header">
18.      <h1>仪表盘</h1>
19.      <p>欢迎回来，{{ role === 'admin' ? '管理员' : '用户' }}！</p>
20.    </header>
22.    <!-- 管理员特定内容 -->
23.    <section v-if="role === 'admin'" class="admin-section">
24.      <div class="card">
25.        <h2>管理员面板</h2>
26.        <p>此部分内容仅对管理员开放。</p>
27.        <button @click="showAdminDetails">查看详情</button>
28.      </div>
29.    </section>
31.    <!-- 用户特定内容 -->
32.    <section v-else class="user-section">
33.      <div class="card">
34.        <h2>用户仪表盘</h2>
35.        <p>欢迎来到您的个人仪表盘。在这里，您可以管理任务并查看重要信息。</p>
36.      </div>
37.    </section>
39.    <!-- 公共内容 -->
40.    <section class="common-section">
41.      <div class="card">
42.        <h2>公共部分</h2>
43.        <p>无论您的角色是什么，都可以看到此部分内容。</p>
44.      </div>
45.    </section>
46. </div>
47. </template>
49. <style scoped>
50. .dashboard {
51. font-family: 'Microsoft YaHei', Arial, sans-serif;
52. max-width: 1200px;
53. margin: 0 auto;
54. padding: 20px;
55. }
57. .dashboard-header {
58. background-color: #4CAF50;
59. color: white;
60. padding: 20px;
61. border-radius: 8px;
62. text-align: center;
63. }
65. .dashboard-header h1 {
66. font-size: 2em;
67. margin-bottom: 0.5em;
68. }
70. .dashboard-header p {
71. font-size: 1.2em;
72. }
74. .admin-section, .user-section, .common-section {
75. display: flex;
76. justify-content: space-around;
77. flex-wrap: wrap;
78. margin-top: 20px;
79. }
81. .card {
82. background-color: white;
83. border-radius: 8px;
84. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
85. padding: 20px;
86. width: 30%;
87. margin-bottom: 20px;
88. transition: transform 0.2s;
89. }
91. .card:hover {
92. transform: translateY(-5px);
93. }
95. .card h2 {
96. font-size: 1.5em;
97. margin-bottom: 0.5em;
98. }
100. .card p {
101. font-size: 1em;
102. }
104. button {
105. background-color: #4CAF50;
106. color: white;
107. padding: 10px 20px;
108. border: none;
109. border-radius: 5px;
110. cursor: pointer;
111. font-size: 1em;
112. margin-top: 10px;
113. }
115. button:hover {
116. background-color: #45a049;
117. }
118. </style>
120. <script>
121. export default {
122. methods: {
123.    showAdminDetails() {
124.      alert('这是管理员详情部分');
125.    }
126. }
127. }
128. </script>

复制代码

• 管理员面板组件
  

1. <script setup>
2. import {onMounted, ref} from 'vue'
3. import {useUserStore} from '../store/user'
5. const userStore = useUserStore()
7. // 示例数据
8. const users = ref([])
10. // 模拟获取用户列表的方法
11. const fetchUsers = () => {
12. // 这里可以替换为实际的API调用
13. setTimeout(() => {
14.    users.value = [
15.      {id: 1, name: '张伟', role: 'admin'},
16.      {id: 2, name: '李娜', role: 'user'}
17.    ]
18. }, 1000)
19. }
21. onMounted(() => {
22. if (userStore.role === 'admin') {
23.    fetchUsers()
24. }
25. })
26. </script>
28. <template>
29. <div class="admin-panel">
30.    <header class="panel-header">
31.      <h1>管理员面板</h1>
32.      <p>欢迎，管理员！</p>
33.    </header>
35.    <!-- 用户列表 -->
36.    <section v-if="users.length > 0" class="user-list-section">
37.      <h2>用户列表</h2>
38.      <ul>
39.        <li v-for="user in users" :key="user.id" class="user-item">
40.          <span>{{ user.name }}</span> -
41.          <span>{{ user.role === 'admin' ? '管理员' : '普通用户' }}</span>
42.        </li>
43.      </ul>
44.    </section>
45.    <section v-else class="loading-section">
46.      <p>加载用户中...</p>
47.    </section>
48. </div>
49. </template>
51. <style scoped>
52. .admin-panel {
53. max-width: 800px;
54. margin: 0 auto;
55. padding: 20px;
56. background-color: #f9f9f9;
57. border-radius: 8px;
58. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
59. font-family: 'Microsoft YaHei', Arial, sans-serif;
60. }
62. .panel-header {
63. text-align: center;
64. margin-bottom: 20px;
65. }
67. .panel-header h1 {
68. color: #333;
69. font-size: 2em;
70. }
72. .panel-header p {
73. color: #666;
74. font-size: 1.2em;
75. }
77. .user-list-section, .loading-section {
78. text-align: center;
79. }
81. .user-list-section ul {
82. list-style-type: none;
83. padding: 0;
84. }
86. .user-item {
87. background-color: #fff;
88. margin-bottom: 10px;
89. padding: 15px;
90. border-radius: 4px;
91. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
92. display: flex;
93. justify-content: space-between;
94. align-items: center;
95. }
97. .user-item span:first-child {
98. font-weight: bold;
99. }
101. .loading-section p {
102. font-size: 1.2em;
103. color: #666;
104. }
105. </style>

复制代码

1. <template>
2. <div class="product-management">
5.    <!-- 添加产品的弹窗 -->
6.    <div v-if="isAddModalVisible" class="modal-overlay" @click.self="closeAddModal">
7.      <div class="modal-content">
8.        <span class="close" @click="closeAddModal">&times;</span>
9.        <h2>添加产品</h2>
10.        <form @submit.prevent="saveProduct()">
11.          <div class="form-group">
12.            <label for="content">内容:</label>
13.            <input type="text" id="content" v-model="addProduct.content" required />
14.          </div>
15.          <div class="form-group">
16.            <label for="image">图片URL:</label>
17.            <input type="url" id="image" v-model="addProduct.image" required />
18.          </div>
19.          <button type="submit">保存</button>
20.        </form>
21.      </div>
22.    </div>
24.    <!-- 编辑产品的弹窗 -->
25.    <div v-if="isEditModalVisible" class="modal-overlay" @click.self="closeEditModal">
26.      <div class="modal-content">
27.        <span class="close" @click="closeEditModal">&times;</span>
28.        <h2>编辑产品</h2>
29.        <form @submit.prevent="updateProduct()">
30.          <div class="form-group">
31.            <label for="editContent">内容:</label>
32.            <input type="text" id="editContent" v-model="editProductData.content" required />
33.          </div>
34.          <div class="form-group">
35.            <label for="editImage">图片URL:</label>
36.            <input type="url" id="editImage" v-model="editProductData.image" required />
37.          </div>
38.          <button type="submit">更新</button>
39.        </form>
40.      </div>
41.    </div>
43.    <!-- 产品列表 -->
44.    <div class="product-list">
45.      <h2>产品列表</h2>
46.      <ul>
47.        <li v-for="(item, index) in products" :key="index" class="product-item">
48.          <img :src="item.image" alt="Product Image" class="product-image" @click="showImage(item.image)">
49.          <div class="product-info">
50.            <span>{{ item.content }}</span>
51.            <span>{{ item.addTime }}</span>
52.          </div>
53.          <div class="actions">
54.            <button @click="editProduct(item)">编辑</button>
55.            <button @click="deleteProduct(item)">删除</button>
56.          </div>
57.        </li>
58.      </ul>
59.    </div>
60.    <!-- 添加产品的按钮 -->
61.    <button class="add-product-button" @click="openAddModal">添加产品</button>
62.    <!-- Lightbox 图片预览 -->
63.    <vue-easy-lightbox
64.        :visible="visible"
65.        :imgs="imgs"
66.        @hide="handleHide"
67.    ></vue-easy-lightbox>
68. </div>
69. </template>
71. <script>
72. import { ref, onMounted } from 'vue';
73. import axios from 'axios';
74. import VueEasyLightbox from 'vue-easy-lightbox';
76. export default {
77. components: { VueEasyLightbox },
78. setup() {
79.    const isAddModalVisible = ref(false);
80.    const isEditModalVisible = ref(false);
81.    const addProduct = ref({ content: '', image: '' });
82.    const editProductData = ref({ content: '', image: '' });
83.    const products = ref([]);
84.    const currentProductId = ref(null);
85.    const visible = ref(false);
86.    const imgs = ref('');
88.    // 打开添加产品的模态框
89.    const openAddModal = () => {
90.      isAddModalVisible.value = true;
91.    };
93.    // 关闭添加产品的模态框
94.    const closeAddModal = () => {
95.      isAddModalVisible.value = false;
96.      resetAddForm();
97.    };
99.    // 清空添加表单
100.    const resetAddForm = () => {
101.      addProduct.value.content = '';
102.      addProduct.value.image = '';
103.    };
105.    // 打开编辑产品的模态框
106.    const openEditModal = () => {
107.      isEditModalVisible.value = true;
108.    };
110.    // 关闭编辑产品的模态框
111.    const closeEditModal = () => {
112.      isEditModalVisible.value = false;
113.      resetEditForm();
114.    };
116.    // 清空编辑表单
117.    const resetEditForm = () => {
118.      editProductData.value.content = '';
119.      editProductData.value.image = '';
120.    };
122.    // 保存产品
123.    const saveProduct = async () => {
124.      try {
125.        await axios.post('http://localhost:8080/api/product/save', addProduct.value);
126.        await getProducts();
127.        closeAddModal();
128.      } catch (error) {
129.        console.error('保存产品时出错:', error);
130.      }
131.    };
133.    // 更新产品
134.    const updateProduct = async () => {
135.      try {
136.        await axios.put(`http://localhost:8080/api/product/update/${currentProductId.value}`, editProductData.value);
137.        await getProducts();
138.        closeEditModal();
139.      } catch (error) {
140.        console.error('更新产品时出错:', error);
141.      }
142.    };
144.    // 删除产品
145.    const deleteProduct = async (item) => {
146.      if (confirm('确定要删除此产品吗？')) {
147.        try {
148.          await axios.delete(`http://localhost:8080/api/product/delete/${item.id}`);
149.          await getProducts();
150.        } catch (error) {
151.          console.error('删除产品时出错:', error);
152.        }
153.      }
154.    };
156.    // 编辑产品
157.    const editProduct = (item) => {
158.      currentProductId.value = item.id;
159.      editProductData.value = { ...item };
160.      openEditModal();
161.    };
163.    // 获取所有产品
164.    const getProducts = async () => {
165.      try {
166.        const response = await axios.get('http://localhost:8080/api/product/getAll');
167.        products.value = response.data;
168.      } catch (error) {
169.        console.error('获取产品列表时出错:', error);
170.      }
171.    };
173.    // 显示大图
174.    const showImage = (src) => {
175.      imgs.value = src;
176.      visible.value = true;
177.    };
179.    // 隐藏大图
180.    const handleHide = () => {
181.      visible.value = false;
182.    };
184.    onMounted(() => {
185.      getProducts();
186.    });
188.    return {
189.      isAddModalVisible,
190.      isEditModalVisible,
191.      addProduct,
192.      editProductData,
193.      products,
194.      openAddModal,
195.      closeAddModal,
196.      openEditModal,
197.      closeEditModal,
198.      saveProduct,
199.      updateProduct,
200.      deleteProduct,
201.      editProduct,
202.      visible,
203.      imgs,
204.      showImage,
205.      handleHide
206.    };
207. }
208. };
209. </script>
211. <style scoped>
212. .product-management {
213. display: flex;
214. flex-direction: column;
215. align-items: center;
216. font-family: 'Microsoft YaHei', Arial, sans-serif;
217. }
219. .add-product-button {
220. margin-top: 20px;
221. padding: 10px 20px;
222. background-color: #4CAF50;
223. color: white;
224. border: none;
225. cursor: pointer;
226. font-size: 16px;
227. border-radius: 5px;
228. transition: background-color 0.3s ease;
229. }
231. .add-product-button:hover {
232. background-color: #45a049;
233. }
235. .modal-overlay {
236. position: fixed;
237. top: 0;
238. left: 0;
239. width: 100%;
240. height: 100%;
241. background-color: rgba(0, 0, 0, 0.5);
242. display: flex;
243. justify-content: center;
244. align-items: center;
245. }
247. .modal-content {
248. background-color: white;
249. padding: 20px;
250. border-radius: 8px;
251. width: 400px;
252. position: relative;
253. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
254. }
256. .close {
257. position: absolute;
258. top: 10px;
259. right: 10px;
260. font-size: 20px;
261. cursor: pointer;
262. }
264. .form-group {
265. margin-bottom: 15px;
266. }
268. .form-group label {
269. display: block;
270. margin-bottom: 5px;
271. font-weight: bold;
272. }
274. .form-group input {
275. width: 100%;
276. padding: 8px;
277. box-sizing: border-box;
278. border: 1px solid #ccc;
279. border-radius: 4px;
280. }
282. button[type="submit"] {
283. background-color: #4CAF50;
284. color: white;
285. padding: 10px 15px;
286. border: none;
287. border-radius: 5px;
288. cursor: pointer;
289. font-size: 14px;
290. transition: background-color 0.3s ease;
291. }
293. button[type="submit"]:hover {
294. background-color: #45a049;
295. }
297. .product-list {
298. max-width: 1000px;
299. width: 100%;
300. margin-top: 20px;
301. }
303. .product-list h2 {
304. text-align: center;
305. color: #333;
306. font-size: 1.8em;
307. margin-bottom: 20px;
308. }
310. .product-list ul {
311. list-style-type: none;
312. padding: 0;
313. }
315. .product-item {
316. display: flex;
317. align-items: center;
318. margin-bottom: 15px;
319. padding: 15px;
320. border: 1px solid #ddd;
321. border-radius: 8px;
322. justify-content: space-between;
323. background-color: #f9f9f9;
324. transition: background-color 0.3s ease;
325. }
327. .product-item:hover {
328. background-color: #e9e9e9;
329. }
331. .product-image {
332. max-width: 120px;
333. max-height: 120px;
334. object-fit: cover;
335. margin-right: 15px;
336. cursor: pointer;
337. }
339. .product-info {
340. flex-grow: 1;
341. }
343. .actions button {
344. margin-left: 10px;
345. padding: 5px 10px;
346. background-color: #007bff;
347. color: white;
348. border: none;
349. cursor: pointer;
350. font-size: 14px;
351. border-radius: 3px;
352. transition: background-color 0.3s ease;
353. }
355. .actions button:hover {
356. background-color: #0056b3;
357. }
358. </style>

复制代码

7.在App.vue中遍历Pinia数据获取权限列表

1. <!-- src/App.vue -->
2. <template>
3. <div id="app">
4.    <!-- 导航栏 -->
5.    <nav class="menu-bar">
6.      <ul>
7.        <li v-for="menu in accessibleMenus" :key="menu.path" class="menu-item">
8.          <router-link :to="menu.path">{{ menu.name }}</router-link>
9.        </li>
10.      </ul>
11.    </nav>
13.    <!-- 路由视图 -->
14.    <router-view></router-view>
15. </div>
16. </template>
18. <script setup>
19. import { computed } from 'vue'
20. import { useUserStore } from './store/user'
22. // 使用用户状态管理
23. const userStore = useUserStore()
25. // 计算属性获取可访问菜单列表
26. const accessibleMenus = computed(() => userStore.accessibleMenus)
27. </script>
29. <style scoped>
30. /* 应用全局样式 */
31. #app {
32. font-family: 'Microsoft YaHei', Arial, sans-serif;
33. }
35. .menu-bar {
36. background-color: #333;
37. padding: 10px 0;
38. }
40. .menu-bar ul {
41. list-style-type: none;
42. margin: 0;
43. padding: 0;
44. display: flex;
45. justify-content: center;
46. }
48. .menu-item {
49. margin: 0 15px;
50. }
52. .menu-item a {
53. color: white;
54. text-decoration: none;
55. padding: 8px 15px;
56. border-radius: 5px;
57. transition: background-color 0.3s ease-in-out;
58. }
60. .menu-item a:hover {
61. background-color: #4CAF50;
62. }
64. .menu-item a.router-link-active {
65. background-color: #4CAF50;
66. font-weight: bold;
67. }
68. </style>

复制代码

8.在main.js里设置当前用户权限(user or admin)

1. // src/main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router/router.js'import { createPinia } from 'pinia'
2. import { useUserStore } from './store/user.js'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'const app = createApp(App)const pinia = createPinia()
3. app.use(pinia)
4. app.use(router)app.use(ElementPlus)const userStore = useUserStore()// 模仿登录逻辑userStore.setRole('admin') // 可以根据现实情况设置差别的脚色app.mount('#app')

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告