前端頁面權限驗證

JWTVueDemo/ClientApp/src/App.vue

@@ -72,9 +72,7 @@ export default {
       return !(this.$store.state.authData.authJWT === '');
     },
     getLinks() {
-      return this.$router.options.routes.filter(
-        link => link.isMenu //&& (link.admin === undefined || link.admin === this.$store.state.authData.isAdmin)
-      );
+      return this.$router.options.routes.filter(link => link.isMenu && link.level <= this.$store.state.authData.level);
     },
     isAdmin() {
       return this.$store.state.authData.isAdmin;

JWTVueDemo/ClientApp/src/main.js

@@ -20,18 +20,18 @@ router.beforeEach((to, from, next) => {
     } else if (to.path === '/') {
       next('/home');
     } else {
-      // const page = router.options.routes.find(link => link.path === to.path);
-      // if (page) {
-      //   const isAdmin = JSON.parse(atob(localStorage.getItem('authJWT').split('.')[1])).roles === 'Admin';
-      //   if (page.admin === undefined || page.admin === isAdmin) {
-      //     next();
-      //   } else {
-      //     alert('沒有權限進入該頁面');
-      //     next(from.path); //
-      //   }
-      // } else {
-      //   next(from.path);
-      // }
+      const page = router.options.routes.find(link => link.path === to.path);
+      if (page) {
+        const havePermission = JSON.parse(atob(localStorage.getItem('authJWT').split('.')[1])).level >= page.level;
+        if (havePermission) {
+          next();
+        } else {
+          alert('沒有權限進入該頁面');
+          next(from.path);
+        }
+      } else {
+        next(from.path);
+      }
       next();
     }
   } else {

JWTVueDemo/ClientApp/src/router/index.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from '../views/Home.vue';
+import PageA from '../views/PageA.vue';
+import PageB from '../views/PageB.vue';
+import PageC from '../views/PageC.vue';
 
 Vue.use(VueRouter);
 const routes = [
@@ -17,8 +20,39 @@ const routes = [
     component: Home,
     isMenu: true,
     icon: 'mdi-home',
+    admin: false,
+    props: { title: 'Home' },
+    level: 0
+  },
+  {
+    path: '/PageA',
+    name: 'PageA',
+    component: PageA,
+    isMenu: true,
+    icon: 'mdi-home',
+    admin: true,
+    props: { title: 'PageA' },
+    level: 0
+  },
+  {
+    path: '/PageB',
+    name: 'PageB',
+    component: PageB,
+    isMenu: true,
+    icon: 'mdi-home',
+    admin: true,
+    props: { title: 'PageB' },
+    level: 20
+  },
+  {
+    path: '/PageC',
+    name: 'PageC',
+    component: PageC,
+    isMenu: true,
+    icon: 'mdi-home',
     admin: true,
-    props: { title: 'Home' }
+    props: { title: 'PageC' },
+    level: 50
   },
   {
     path: '*',

JWTVueDemo/ClientApp/src/store/authData.js

@@ -23,7 +23,8 @@ const authData = {
   state: {
     authJWT: '',
     isAdmin: false,
-    name: ''
+    name: '',
+    level: 0
   },
   mutations: {
     /**
@@ -33,7 +34,8 @@ const authData = {
       state.authJWT = payload.authJWT;
       const info = JSON.parse(atob(payload.authJWT.split('.')[1]));
       state.isAdmin = info.roles === 'Admin';
-      state.name = decodeURI(info.ShopName);
+      state.name = info.UserId;
+      state.level = +info.level;
     },
     [RemoveAuthJWT](state, payload) {
       state.authJWT = '';

JWTVueDemo/ClientApp/src/views/PageA.vue

+<template>
+  <div class="PageA">PageA</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { setPageTitleMixin } from '../mixins/setPageTitleMixin';
+export default {
+  mixins: [setPageTitleMixin],
+  components: {},
+  name: 'PageA',
+  props: { id: String },
+  data: () => ({}),
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>

JWTVueDemo/ClientApp/src/views/PageB.vue

+<template>
+  <div class="PageB">PageB</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { setPageTitleMixin } from '../mixins/setPageTitleMixin';
+export default {
+  mixins: [setPageTitleMixin],
+  components: {},
+  name: 'PageB',
+  props: { id: String },
+  data: () => ({}),
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>

JWTVueDemo/ClientApp/src/views/PageC.vue

+<template>
+  <div class="PageC">PageC</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { setPageTitleMixin } from '../mixins/setPageTitleMixin';
+export default {
+  mixins: [setPageTitleMixin],
+  components: {},
+  name: 'PageC',
+  props: { id: String },
+  data: () => ({}),
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>

JWTVueDemo/Controllers/AuthController.cs

@@ -31,25 +31,33 @@ namespace JWTVueDemo.Controllers
                 Msg = "",
                 Success = true
             };
+            List<Claim> claims;
             if (loginInfo.Account.Equals("admin") && loginInfo.Password.Equals("123"))
             {
-                var isAdmin = true;
-                var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(AppSettings.JWTSecret));
-                var tokenDescriptor = new SecurityTokenDescriptor
+                claims = new List<Claim>()
                 {
-                    Subject = new ClaimsIdentity(new Claim[]
-                    {
-                        new Claim("UserId","admin"),
-                        new Claim("roles",isAdmin?Roles.Admin:Roles.User)
-                    }),
-                    Expires = DateTime.UtcNow.AddDays(30),
-                    SigningCredentials = new SigningCredentials(key, SecurityAlgorithms.HmacSha256Signature)
+                    new Claim("UserId","admin"),
+                    new Claim("roles",Roles.Admin),
+                    new Claim("level","100"),
+                };
+            }
+            else if (loginInfo.Account.Equals("useradmin") && loginInfo.Password.Equals("123"))
+            {
+                claims = new List<Claim>()
+                {
+                    new Claim("UserId","admin"),
+                    new Claim("roles",Roles.Admin),
+                    new Claim("level","40"),
+                };
+            }
+            else if (loginInfo.Account.Equals("user") && loginInfo.Password.Equals("123"))
+            {
+                claims = new List<Claim>()
+                {
+                    new Claim("UserId","admin"),
+                    new Claim("roles",Roles.Admin),
+                    new Claim("level","0"),
                 };
-                var tokenHandler = new JwtSecurityTokenHandler();
-                var securityToken = tokenHandler.CreateToken(tokenDescriptor);
-                var token = tokenHandler.WriteToken(securityToken);
-                response.Data = token;
-                return response;
             }
             else
             {
@@ -57,6 +65,18 @@ namespace JWTVueDemo.Controllers
                 response.Msg = "帳號密碼錯誤";
                 return response;
             }
+            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(AppSettings.JWTSecret));
+            var tokenDescriptor = new SecurityTokenDescriptor
+            {
+                Subject = new ClaimsIdentity(claims),
+                Expires = DateTime.UtcNow.AddDays(30),
+                SigningCredentials = new SigningCredentials(key, SecurityAlgorithms.HmacSha256Signature)
+            };
+            var tokenHandler = new JwtSecurityTokenHandler();
+            var securityToken = tokenHandler.CreateToken(tokenDescriptor);
+            var token = tokenHandler.WriteToken(securityToken);
+            response.Data = token;
+            return response;
         }
         [HttpGet("[action]")]
         public BaseResponse<DateTime> Test()