权限处理

src/api/index.js

@@ -2,8 +2,8 @@ import Setting from "@/setting";
 // let host = Setting.apiBaseURL
 // let host = "http://192.168.31.151:9000/"; // 榕
 // let host = 'http://192.168.31.125:9000/'; // 坤
-let host = 'http://192.168.31.137:9000/'; // 赓
-// let host = "http://39.108.250.202:9000/"; // 测试服
+// let host = 'http://192.168.31.137:9000/'; // 赓
+let host = "http://39.108.250.202:9000/"; // 测试服
 
 
 let uploadURL = Setting.upload.apiURL;

src/main.js

@@ -38,6 +38,8 @@ const i18n = new VueI18n({
 
 function auth(values){
     // 直接拿值进行匹配,取得当前router的mate信息,传入，返回一个boolean，以此进行vif判断
+    // router.meta 信息匹配传进来的value，用vif去进行按钮级权限配置即可。
+    // $router.currentRoute.meta
 
 }
 Vue.use(auth)// 鉴权函数

src/router/index.js

@@ -27,15 +27,38 @@ let router = createRouter();
 
 export default router;
 
+
+/**
+ * 错误页面
+ */
+ const errorPage = [
+    {
+        path: "/403",
+        name: "403",
+        meta: {
+            title: "403"
+        },
+        component: () => import("@/pages/exception/error/403")
+    },
+    {
+        path: "*",
+        name: "404",
+        meta: {
+            title: "404"
+        },
+        component: () => import("@/pages/exception/error/404")
+    }
+];
+// 处理路由权限的方法
 function getPermission(){
     get(api.getUserRolesPermissionMenu).then(res => {
         console.log(res,'权限的值')
         // 取得路由的值，使用addRouter添加进路由里
-        let permissionRouters = []
+        let permissionRouters = [] // 最后处理好的路由数组
         let data = res.permissionMenu[0].children 
         if(data.length>0){
             data.forEach(e=>{
-                // 循环，取得主路由以及路由信息，重复循环，取得
+                // 第一级路由
                 let obj = {
                     path:e.path,
                     name:e.name,
@@ -43,32 +66,35 @@ function getPermission(){
                     meta:[],
                     children:[]
                 }
-                // 取得页面内的次级路由以及页面按钮
-                if(e.children&&e.children.length>0){
                 let meta = []
                 let children = []
+                // 第二级是按钮级数据，一级归属当前页的同级页面，实际上一共就一级路由
+                if(e.children&&e.children.length>0){
                     e.children.forEach(i=>{
-                        // 先判断是否有path，有就是页面,页面需要额外进入children，
-                        if(i.path){
+                        // 避免重复生成路由
+                        if(i.path&&!permissionRouters.some(e=>i.path===e.path)){
                             let obj = {
                                 path:i.path,
                                 name:i.name,
                                 component:`../pages${i.path}`,
                                 meta:[],
+                                children:[]
                             }                            
-                            // 额外处理该页面的按钮,只有两级，懒得递归
-                            if(i.children&&i.children.length>0){
-                                
-                            }
-                            children.push(obj)
+                            permissionRouters.push(obj) // path是页面,要塞入上一级同级里，需要单独push进去生成路由
                         }else{
+                            // 其他的是归属于当前页的按钮级信息，以此为依据来做按钮权限即可
                             meta.push(i.name)
                         }
                     })
-                    // 其他的是按钮
-
                 }
+                obj.meta = meta
+                obj.children = children
+                // 处理好的路由
+                permissionRouters.push(obj)
             })
+            // 把处理完成的路由，add到router里
+            // router.addRoutes(permissionRouters)
+            router.addRoutes(errorPage)
         }
 
     })
@@ -81,7 +107,6 @@ router.beforeEach(function(to,from,next){
     if(util.local.get(Setting.tokenKey)){
         if(!sessionStorage.getItem('handelPermission')){
             getPermission()
-            
         }
     }else{
         if (to.path !== '/login') {

src/router/routes.js

@@ -87,5 +87,5 @@ export const frameInRoutes = frameIn;
 export default [
     ...frameIn,
     ...frameOut,
-    ...errorPage
+    // ...errorPage
 ];