动态路由大体实现

5 years ago · 60521295b3
10 changed files with 298 additions and 72 deletions
--- a/QMPlusVuePage/src/api/menu.js
+++ b/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',
+    })
+}
--- a/QMPlusVuePage/src/api/user.js
+++ b/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
+    })
+}
--- a/QMPlusVuePage/src/main.js
+++ b/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

--- a/QMPlusVuePage/src/permission.js
+++ b/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"
-    }]
-}]
--- a/QMPlusVuePage/src/router/index.js
+++ b/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'
-
    }
 ]

--- a/QMPlusVuePage/src/store/index.js
+++ b/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]
 })
--- a/QMPlusVuePage/src/store/module/router.js
+++ b/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
+        }
+    }
+}
--- a/QMPlusVuePage/src/store/module/user.js
+++ b/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
        }
    }
 }
--- a/QMPlusVuePage/src/view/login/login.vue
+++ b/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>
--- a/QMPlusVuePage/src/view/login/regist.vue
+++ b/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>