UP

public/json/user.json

@@ -101,6 +101,14 @@
 					"component": "lala"
 				}]
 			}
+		],
+		"permissions": [
+			"list.add",
+			"list.edit",
+			"list.delete",
+			"user.add",
+			"user.edit",
+			"user.delete"
 		]
 	},
 	"message": ""

src/main.js

@@ -7,12 +7,14 @@ import router from './router'
 import store from './store'
 import tool from './utils/tool'
 import api from './api'
+import permission from './utils/permission'
 
 const app = createApp(App);
 
 app.config.globalProperties.$CONFIG = config;
 app.config.globalProperties.$TOOL = tool;
 app.config.globalProperties.$API = api;
+app.config.globalProperties.$HAS = permission;
 
 app.use(store);
 app.use(router);

src/utils/permission.js

@@ -0,0 +1,15 @@
+import tool from '@/utils/tool';
+
+let permission = (data) => {
+	let userInfo = tool.data.get("user");
+	if(!userInfo){
+		return false;
+	}
+	let permissions = userInfo.permissions;
+	if(!permissions){
+		return false;
+	}
+	let isHave = permissions.includes(data);
+	return isHave;
+}
+export default permission;

src/utils/tool.js

@@ -1,17 +1,23 @@
 const tool = {
 	/* localStorage */
-	data : {
-		set : function(table, settings){
+	data: {
+		set: function(table, settings) {
 			var _set = JSON.stringify(settings)
 			return localStorage.setItem(table, _set);
 		},
-		get : function(table){
-			return JSON.parse(localStorage.getItem(table));
+		get: function(table) {
+			var data = localStorage.getItem(table);
+			try {
+				data = JSON.parse(data)
+			} catch (err) {
+				return null
+			}
+			return data;
 		},
-		remove : function(table){
+		remove: function(table) {
 			return localStorage.removeItem(table);
 		},
-		clear : function(){
+		clear: function() {
 			return localStorage.clear();
 		}
 	}

src/views/home.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-row>
+	<el-row :gutter="20">
 		<el-col :span="24">
 			<el-card shadow="never">
 				<div class="welTop">
@@ -28,12 +28,30 @@
 			</el-card>
 		</el-col>
 	</el-row>
+
+	<el-row :gutter="20">
+		<el-col :span="24">
+			<el-card shadow="never" header="User Permissions">
+				<el-tag v-if="$HAS('user.add')">user.add</el-tag>
+				<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
+				<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
+				<el-tag v-if="$HAS('list.add')">list.add</el-tag>
+				<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
+				<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
+			</el-card>
+		</el-col>
+	</el-row>
+
 </template>
 
 <script>
 </script>
 
 <style scoped>
+	.el-row {margin-bottom:20px;}
+	.el-tag+.el-tag {margin-left: 10px;}
+	
+	
 	.welTop {display: flex;}
 	.welTop .main {margin-left:20px;}
 	.welTop .main h2 {font-size: 20px;color: #3c4a54;}