首页菜单权限控制，发版前提交

src/permission.js

@@ -27,7 +27,14 @@ router.beforeEach((to, from, next) => {
           store.dispatch('GenerateRoutes').then(accessRoutes => {
             // 根据roles权限生成可访问的路由表
             router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            // console.log(accessRoutes, to, 'accessRoutes11');
+            if(accessRoutes[0].children[0].path != 'index' && (to.path === '/index' || to.path === '/')) {
+              next({ ...accessRoutes[0].children[0], replace: true }) // hack方法 确保addRoutes已完成
+            } else if(accessRoutes[0].children[0].path == 'index' && (to.path === '/index' || to.path === '/')){
+               next({ ...accessRoutes[0].children[0], replace: true }) 
+            } else {
+              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            }
           })
         }).catch(err => {
             store.dispatch('LogOut').then(() => {

src/router/index.js

@@ -61,19 +61,19 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/error/401'], resolve),
     hidden: true
   },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/index'], resolve),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: 'index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: (resolve) => require(['@/views/index'], resolve),
+  //       name: 'Index',
+  //       meta: { title: '首页', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

src/views/login.vue

@@ -1,51 +1,31 @@
 <template>
   <div class="login" :class="processClass">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title"> {{loginTitle}}</h3>
+      <h3 class="title"> {{ loginTitle }}</h3>
       <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+          @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
+        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+          @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
+        <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+          @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
@@ -65,6 +45,7 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { mapGetters } from "vuex";
 
 export default {
   name: "Login",
@@ -81,10 +62,10 @@ export default {
       },
       loginRules: {
         username: [
-          { required: true, trigger: ["change","blur"], message: "请输入您的账号" }
+          { required: true, trigger: ["change", "blur"], message: "请输入您的账号" }
         ],
         password: [
-          { required: true, trigger: ["change","blur"], message: "请输入您的密码" }
+          { required: true, trigger: ["change", "blur"], message: "请输入您的密码" }
         ],
         code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
@@ -99,19 +80,22 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
       immediate: true
     }
   },
+  computed: {
+    ...mapGetters(["sidebarRouters"]),
+  },
   created() {
     this.getCode();
     this.getCookie();
 
     // 根据环境切换名称和背景图
     this.loginTitle = process.env.VUE_APP_TITLE;
-    if(process.env.NODE_ENV == 'development') { // 开发环境
+    if (process.env.NODE_ENV == 'development') { // 开发环境
       this.processClass = 'login-dev';
     } else if (process.env.NODE_ENV == 'staging') { // 测试环境
       this.processClass = 'login-stage';
@@ -129,7 +113,7 @@ export default {
         //   this.codeUrl =  res.data.captchaImage;
         //   this.loginForm.uuid = res.data.captchaKey;
         // }
-        this.codeUrl =  res.data.captchaImage;
+        this.codeUrl = res.data.captchaImage;
         this.loginForm.uuid = res.data.captchaKey;
       });
     },
@@ -156,8 +140,9 @@ export default {
             Cookies.remove("password");
             Cookies.remove('rememberMe');
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          this.$store.dispatch("Login", this.loginForm).then(async () => {
+            console.log(this.redirect, 'this.redirect');
+            this.$router.push({ path: this.redirect || "/index" }).catch(() => { });
           }).catch(() => {
             this.loading = false;
             if (this.captchaEnabled) {
@@ -166,7 +151,7 @@ export default {
           });
         }
       });
-    }
+    },
   }
 };
 </script>
@@ -179,15 +164,19 @@ export default {
   height: 100%;
   background-size: cover;
 }
-.login-prod{
+
+.login-prod {
   background-image: url("../assets/images/login-prod.png") !important;
 }
-.login-stage{
+
+.login-stage {
   background-image: url("../assets/images/login-bg-img.png") !important;
 }
-.login-dev{
+
+.login-dev {
   background-image: url("../assets/images/login-background.jpg") !important;
 }
+
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
@@ -199,32 +188,39 @@ export default {
   background: #ffffff;
   width: 400px;
   padding: 25px 25px 5px 25px;
+
   .el-input {
     height: 38px;
+
     input {
       height: 38px;
     }
   }
+
   .input-icon {
     height: 39px;
     width: 14px;
     margin-left: 2px;
   }
 }
+
 .login-tip {
   font-size: 13px;
   text-align: center;
   color: #bfbfbf;
 }
+
 .login-code {
   width: 33%;
   height: 38px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
   }
 }
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -237,6 +233,7 @@ export default {
   font-size: 12px;
   letter-spacing: 1px;
 }
+
 .login-code-img {
   height: 38px;
 }