动态路由大体实现

QMPlusVuePage/src/api/menu.js

@@ -0,0 +1,12 @@
+import service from '@/utils/request'
+
+// @Summary 用户登录
+// @Produce  application/json
+// @Param 可以什么都不填 调一下即可
+// @Router /menu/getMenu [post]
+export const asyncMenu = () => {
+    return service({
+        url: "/menu/getMenu",
+        method: 'post',
+    })
+}

QMPlusVuePage/src/api/user.js

@@ -2,12 +2,24 @@ import service from '@/utils/request'
 
 // @Summary 用户登录
 // @Produce  application/json
-// @Param data body {userName:"string",passWord:"string"}
+// @Param data body {username:"string",password:"string"}
 // @Router /base/login [post]
 export const login = (data) => {
-    service({
+    return service({
         url: "/base/login",
         method: 'post',
         data: data
     })
 }
+
+// @Summary 用户注册
+// @Produce  application/json
+// @Param data body {username:"string",password:"string"}
+// @Router /base/resige [post]
+export const regist = (data) => {
+    return service({
+        url: "/base/regist",
+        method: 'post',
+        data: data
+    })
+}

QMPlusVuePage/src/main.js

@@ -6,7 +6,7 @@ import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 // 引入封装的router
 import router from '@/router/index'
-
+import '@/permission'
 import { store } from '@/store/index'
 Vue.config.productionTip = false
 

QMPlusVuePage/src/permission.js

@@ -1,26 +1,40 @@
 import router from './router'
-import { asyncRouterHandle } from '@/utils/asyncRouter';
+import { store } from '@/store/index'
 
-router.beforeEach((to, from, next) => {
+let asyncRouterFlag = 0
+
+const whiteList = ['login', 'regist']
+router.beforeEach(async(to, from, next) => {
+    const token = store.getters['user/token']
+        // 在白名单中的判断情况
+    if (whiteList.indexOf(to.name) > -1) {
+        if (token) {
+            next({ name: 'dashbord' })
+        } else {
+            next()
+        }
+    } else {
+        // 不在白名单中并且已经登陆的时候
+        if (token) {
+            // 添加flag防止多次获取动态路由和栈溢出
+            if (!asyncRouterFlag) {
+                asyncRouterFlag++
+                await store.dispatch('router/SetAsyncRouter')
+                const asyncRouters = store.getters['router/asyncRouters']
+                router.addRoutes(asyncRouters)
+                next({...to, replace: true })
+            } else {
                 next()
-        // asyncRouterHandle(asyncRouter)   // 等待动态使用 VUEX持久化 会将其放入 vuex并且动态生成左侧列表
-        // router.addRoutes(asyncRouter)
+            }
+        }
+        // 不在白名单中并且未登陆的时候
+        if (!token) {
+            next({
+                name: "login",
+                query: {
+                    redirect: document.location.hash
+                }
+            })
+        }
+    }
 })
-
-const asyncRouter = [{
-    path: '/layout',
-    name: 'layout',
-    component: 'view/layout/index.vue',
-    meta: {
-        title: '首页',
-    },
-    children: [{
-        path: 'dashbord',
-        name: 'dashbord',
-        component: 'view/dashbord/index.vue'
-    }, {
-        path: "test",
-        name: "test",
-        component: "view/test/index.vue"
-    }]
-}]

QMPlusVuePage/src/router/index.js

@@ -20,15 +20,10 @@ const baseRouters = [{
             import ('@/view/login/regist.vue')
     },
     {
-        path: "/error",
-        name: "error",
+        path: "/404",
+        name: "404",
         component: () =>
             import ('@/view/error/index.vue')
-    },
-    {
-        path: '*',
-        redirect: '/error'
-
     }
 ]
 

QMPlusVuePage/src/store/index.js

@@ -3,16 +3,20 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 
 import { user } from "@/store/module/user"
+import { router } from "@/store/module/router"
+
 Vue.use(Vuex)
 
 
 
 const vuexLocal = new VuexPersistence({
-    storage: window.localStorage
+    storage: window.localStorage,
+    modules: ['user']
 })
 export const store = new Vuex.Store({
     modules: {
-        user
+        user,
+        router
     },
     plugins: [vuexLocal.plugin]
 })

QMPlusVuePage/src/store/module/router.js

@@ -0,0 +1,36 @@
+import { asyncRouterHandle } from '@/utils/asyncRouter';
+
+import { asyncMenu } from '@/api/menu'
+
+export const router = {
+    namespaced: true,
+    state: {
+        asyncRouters: []
+    },
+    mutations: {
+        // 设置动态路由
+        setAsyncRouter(state, asyncRouters) {
+            state.asyncRouters = asyncRouters
+        }
+    },
+    actions: {
+        // 从后台获取动态路由
+        async SetAsyncRouter({ commit }) {
+            const asyncRouterRes = await asyncMenu()
+            const asyncRouter = asyncRouterRes.data.menus
+            asyncRouter.push({
+                path: '*',
+                redirect: '/404'
+
+            })
+            asyncRouterHandle(asyncRouter) // 等待动态使用 VUEX持久化 会将其放入 vuex并且动态生成左侧列表
+            commit('setAsyncRouter', asyncRouter)
+        }
+    },
+    getters: {
+        // 获取动态路由
+        asyncRouters(state) {
+            return state.asyncRouters
+        }
+    }
+}

QMPlusVuePage/src/store/module/user.js

@@ -1,5 +1,6 @@
 import { login } from '@/api/user'
-
+import router from '@/router/index'
+import { Message } from 'element-ui'
 export const user = {
     namespaced: true,
     state: {
@@ -9,7 +10,8 @@ export const user = {
             headerImg: "",
             authority: "",
         },
-        token: ""
+        token: "",
+        expiresAt: ""
     },
     mutations: {
         setUserInfo(state, userInfo) {
@@ -19,23 +21,43 @@ export const user = {
         setToken(state, token) {
             // 这里的 `state` 对象是模块的局部状态
             state.token = token
+        },
+        setExpiresAt(state, expiresAt) {
+            // 这里的 `state` 对象是模块的局部状态
+            state.expiresAt = expiresAt
         }
     },
     actions: {
-        LoginIn({ commit }, loginInfo) {
-            login(loginInfo).then(res => {
+        async LoginIn({ commit }, loginInfo) {
+            try {
+                const res = await login(loginInfo)
                 commit('setUserInfo', res.data.user)
                 commit('setToken', res.data.token)
-                return res
-            }).catch(err => {
-                console.error(err)
-                return Promise.reject(err)
+                commit('setExpiresAt', res.data.expiresAt)
+                if (res.success) {
+                    const redirect = router.history.current.query.redirect
+                    if (redirect) {
+                        router.push({ path: redirect })
+                    } else {
+                        router.push({ path: '/layout/dashboard' })
+                    }
+                }
+            } catch (err) {
+                Message({
+                    type: 'error',
+                    message: err,
+                    showClose: true
                 })
+                return Promise.reject(err)
+            }
         }
     },
     getters: {
         userInfo(state) {
             return state.userInfo
+        },
+        token(state) {
+            return state.token
         }
     }
 }

QMPlusVuePage/src/view/login/login.vue

@@ -1,35 +1,81 @@
 <template>
   <el-container class="login-box">
-            <el-header>登录</el-header>
-                <el-main>输入框在这里
-                    <el-button @click="login">
-                        登录
-                    </el-button>
+    <el-main>
+      <el-form :model="loginForm" :rules="rules" label-width="100px" ref="loginForm" status-icon>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="loginForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="loginForm.password">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-button @click="submitForm">登录</el-button>
     </el-main>
   </el-container>
 </template>
 
 <script>
-import {mapState, mapGetters, mapActions , mapMutations} from 'vuex'
-import {login} from '@/api/user'
+import { mapActions } from 'vuex'
 export default {
-    name:"Login",
-    computed:{
-    ...mapGetters("user",["userInfo"]),
-    ...mapState("user",["token"])
+  name: 'Login',
+  data() {
+    const checkUsername = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const checkPassword = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      lock: 'lock',
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      rules: {
+        username: [{ validator: checkUsername, trigger: 'blur' }],
+        password: [{ validator: checkPassword, trigger: 'blur' }]
+      }
+    }
   },
   methods: {
-        ...mapActions("user",["AsyncSetUserInfo"]),
-        ...mapMutations("user",["setUserInfo"]),
-        login(){
-            login({userName:"string1",passWord:"string"})
+    ...mapActions('user', ['LoginIn']),
+    async login() {
+      await this.LoginIn(this.loginForm)
+    },
+    async submitForm() {
+      this.$refs.loginForm.validate(async v => {
+        if (v) {
+          await this.login()
+        } else {
+          this.$message({
+            type: 'error',
+            message: '请正确填写登录信息',
+            showClose: true
+          })
+          return false
         }
+      })
     },
+    changeLock() {
+      this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-    .login-box{
-        background: #409EFF
-    }
+.login-box {
+  background: #409eff;
+}
 </style>

QMPlusVuePage/src/view/login/regist.vue

@@ -1,16 +1,101 @@
 <template>
-    <div>
-        注册
-    </div>
+  <el-container class="login-box">
+    <el-main>
+      <el-form :model="registForm" :rules="rules" label-width="100px" ref="registForm" status-icon>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="registForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="registForm.password">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="重复密码" prop="rePassword">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="registForm.rePassword">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-button @click="submitForm">注册</el-button>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import { regist } from '@/api/user'
 export default {
-    name:"Regist"
+  name: 'Regist',
+  data() {
+    const ratioPassword = (rule, value, callback) => {
+      if (value != this.registForm.password) {
+        return callback(new Error('两次密码不同'))
+      } else {
+        callback()
+      }
+    }
+    const checkUsername = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const checkPassword = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
 
+    return {
+      lock: 'lock',
+      registForm: {
+        username: '',
+        password: '',
+        rePassword: ''
+      },
+      rules: {
+        username: [{ validator: checkUsername, trigger: 'blur' }],
+        password: [{ validator: checkPassword, trigger: 'blur' }],
+        rePassword: [{ validator: ratioPassword, trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['LoginIn']),
+    async submitForm() {
+      this.$refs.registForm.validate(async v => {
+        if (v) {
+          const res = await regist(this.registForm)
+          if (res.success) {
+            this.$message({
+              type: 'success',
+              message: '注册成功',
+              showClose: true
+            })
+            await this.LoginIn(this.registForm)
+          }
+        } else {
+          this.$message({
+            type: 'error',
+            message: '请正确填写注册信息',
+            showClose: true
+          })
+          return false
+        }
+      })
+    },
+    changeLock() {
+      this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.login-box {
+  background: #409eff;
+}
 </style>