refactor(permission): 业务权限功能代码完善

Author: cklwblove

package-lock.json

@@ -92,8 +92,10 @@
     "less-loader": "^4.1.0",
     "lint-staged": "^8.1.0",
     "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "progress-bar-webpack-plugin": "^1.12.1",
+    "sass-loader": "^8.0.0",
     "script-ext-html-webpack-plugin": "^2.1.3",
     "script-loader": "^0.7.2",
     "serve-static": "^1.14.1",

package.json

@@ -10,18 +10,13 @@ import { Message } from 'element-ui';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { getToken } from '@/utils/auth';
+import getPageTitle from '@/utils/getPageTitle';
 import { Route } from 'vue-router';
 import { UserModule } from '@/store/modules/user';
+import { PermissionModule } from '@/store/modules/permission';
 
 NProgress.configure({showSpinner: false});
 
-// permission judge function
-function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true; // admin permission passed directly
-  if (!permissionRoles) return true;
-  return roles.some((role) => permissionRoles.indexOf(role) >= 0);
-}
-
 const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist
 
 router.beforeEach(async (to: Route, from: Route, next: any) => {
@@ -33,25 +28,34 @@ router.beforeEach(async (to: Route, from: Route, next: any) => {
       // if current page is dashboard will not trigger	afterEach hook, so manually handle it
       NProgress.done();
     } else {
-      // console.log('store.getters.roles', store.getters);
-      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
-        UserModule.GetUserInfo().then(() => { // 拉取user_info
-          // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-          next({...to, replace: true});
-        }).catch((err) => {
-          UserModule.FedLogOut().then(() => {
-            Message.error(err);
-            next({path: '/'});
-          });
-        });
+      console.log('store.getters.roles', store.getters);
+      // determine whether the user has obtained his permission roles through getInfo
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0;
+
+      if (hasRoles) {
+        next();
       } else {
-        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-        if (hasPermission(store.getters.roles, to.meta.roles)) {
-          next();
-        } else {
-          next({path: '/401', replace: true, query: {noGoBack: true}});
+        try {
+          // get user info
+          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          await UserModule.GetUserInfo();
+          const roles = UserModule.roles;
+          // generate accessible routes map based on roles
+          await PermissionModule.GenerateRoutes(roles);
+          const dynamicRoutes = PermissionModule.dynamicRoutes;
+          // dynamically add accessible routes
+          router.addRoutes(dynamicRoutes);
+
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          next({...to, replace: true});
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await UserModule.ResetToken();
+          Message.error(error || 'Has Error');
+          next(`/login?redirect=${to.path}`);
+          NProgress.done();
         }
-        // 可删 ↑
       }
     }
   } else {
@@ -65,6 +69,8 @@ router.beforeEach(async (to: Route, from: Route, next: any) => {
   }
 });
 
-router.afterEach(() => {
+router.afterEach((to) => {
   NProgress.done(); // finish progress bar
+  // set page title
+  document.title = getPageTitle(to.meta.title);
 });

src/router/router.interceptor.ts

@@ -1,4 +1,6 @@
 export default {
+  title: 'Vue Element Admin Typescript',
+
   theme: '#1890ff',
 
   /**

src/settings.ts

@@ -13,8 +13,7 @@ const getters = {
   introduction: (state: IRootState) => state.user.introduction,
   status: (state: IRootState) => state.user.status,
   roles: (state: IRootState) => state.user.roles,
-  permission_routers: (state: IRootState) => state.permission.routers,
-  addRouters: (state: IRootState) => state.permission.addRouters,
+  permission_routers: (state: IRootState) => state.permission.routes,
   errorLogs: (state: IRootState) => state.errorLog.logs,
   theme: (state: IRootState) => state.settings.theme,
   fixedHeader: (state: IRootState) => state.settings.fixedHeader,

src/store/getters.ts

@@ -38,32 +38,32 @@ export function filterAsyncRoutes(routes: RouteConfig[], roles: string[]) {
 }
 
 export interface IPermissionState {
-  routers: RouteConfig[];
-  addRouters: RouteConfig[];
+  routes: RouteConfig[];
+  dynamicRoutes: RouteConfig[];
 }
 
 @Module({dynamic: true, store, name: 'permission'})
 class Permission extends VuexModule implements IPermissionState {
-  routers = [];
-  addRouters = [];
+  routes = [];
+  dynamicRoutes = [];
 
   @Action({commit: 'SET_ROUTERS'})
   GenerateRoutes(roles) {
     // console.log('GenerateRoutes', roles);
-    let accessedRouters;
+    let accessedRoutes;
     if (roles.includes('admin')) {
-      accessedRouters = asyncRouterMap;
+      accessedRoutes = asyncRouterMap;
     } else {
-      accessedRouters = filterAsyncRoutes(asyncRouterMap, roles);
+      accessedRoutes = filterAsyncRoutes(asyncRouterMap, roles);
     }
 
-    return accessedRouters;
+    return accessedRoutes;
   }
 
   @Mutation
-  private SET_ROUTERS(routers) {
-    this.addRouters = routers;
-    this.routers = (constantRouterMap as any).concat(routers);
+  private SET_ROUTERS(routes) {
+    this.routes = (constantRouterMap as any).concat(routes);
+    this.dynamicRoutes = routes;
   }
 }
 

src/store/modules/permission.ts

@@ -94,6 +94,13 @@ class User extends VuexModule implements IUserState {
     }
   }
 
+  @Action
+  ResetToken() {
+    removeToken();
+    this.SET_TOKEN('');
+    this.SET_ROLES([]);
+  }
+
   // 获取用户信息
   @MutationAction({mutate: ['roles', 'name', 'avatar', 'introduction']})
   async GetUserInfo() {
@@ -112,11 +119,7 @@ class User extends VuexModule implements IUserState {
       if (!roles || roles.length <= 0) {
         throw Error('getInfo: roles must be a non-null array!');
       }
-      // console.log('roles', roles);
-      // TODO 动态生成路由
-      PermissionModule.GenerateRoutes(roles).then(() => { // 根据roles权限生成可访问的路由表
-        router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
-      });
+      console.log('roles', roles);
       return {
         roles,
         name,

src/store/modules/user.ts

@@ -0,0 +1,11 @@
+import i18n from '@/lang';
+import settings from '@/settings';
+
+export default function getPageTitle(key: string) {
+  const hasKey = i18n.te(`route.${key}`);
+  if (hasKey) {
+    const pageName = i18n.t(`route.${key}`);
+    return `${pageName} - ${settings.title}`;
+  }
+  return `${settings.title}`;
+}

src/utils/getPageTitle.ts

@@ -6,12 +6,12 @@
         <h3 class="title">
           {{ $t('login.title') }}
         </h3>
-        <lang-select class="set-language"/>
+        <lang-select class="set-language" />
       </div>
 
       <el-form-item prop="username">
         <span class="svg-container">
-          <svg-icon name="user"/>
+          <svg-icon name="user" />
         </span>
         <el-input
           ref="username"
@@ -25,7 +25,7 @@
 
       <el-form-item prop="password">
         <span class="svg-container">
-          <svg-icon name="password"/>
+          <svg-icon name="password" />
         </span>
         <el-input
           v-model="loginForm.password"
@@ -39,7 +39,7 @@
           @keyup.enter.native="handleLogin"
         />
         <span class="show-pwd" @click="showPwd">
-          <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'"/>
+          <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
 
@@ -71,7 +71,7 @@
       <br>
       <br>
       <br>
-      <social-sign/>
+      <social-sign />
     </el-dialog>
   </div>
 </template>
@@ -102,6 +102,7 @@
   };
 
   @Component({
+    name: 'Login',
     components: {
       SocialSign,
       LangSelect
@@ -166,15 +167,14 @@
     }
 
     private handleLogin(): void {
-      (this.$refs.loginFormEl).validate((valid) => {
+      (this.$refs.loginFormEl).validate(async (valid) => {
         if (valid) {
           this.loading = true;
-          UserModule.LoginByUsername(this.loginForm).then(() => {
+          await UserModule.LoginByUsername(this.loginForm);
+          this.$router.push({path: this.redirect || '/'});
+          setTimeout(() => {
             this.loading = false;
-            this.$router.push({path: this.redirect || '/'});
-          }).catch(() => {
-            this.loading = false;
-          });
+          }, 0.5 * 1000);
         } else {
           console.log('error submit!!');
           return false;