From 60521295b38cac24ddfaf166b18a28371bb6fd6a Mon Sep 17 00:00:00 2001 From: pixelqm <303176530@qq.com> Date: Sat, 14 Sep 2019 22:30:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1=E5=A4=A7?= =?UTF-8?q?=E4=BD=93=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- QMPlusVuePage/src/api/menu.js | 12 +++ QMPlusVuePage/src/api/user.js | 16 +++- QMPlusVuePage/src/main.js | 2 +- QMPlusVuePage/src/permission.js | 60 ++++++++------ QMPlusVuePage/src/router/index.js | 9 +-- QMPlusVuePage/src/store/index.js | 8 +- QMPlusVuePage/src/store/module/router.js | 36 +++++++++ QMPlusVuePage/src/store/module/user.js | 38 +++++++-- QMPlusVuePage/src/view/login/login.vue | 90 +++++++++++++++------ QMPlusVuePage/src/view/login/regist.vue | 99 ++++++++++++++++++++++-- 10 files changed, 298 insertions(+), 72 deletions(-) create mode 100644 QMPlusVuePage/src/api/menu.js create mode 100644 QMPlusVuePage/src/store/module/router.js diff --git a/QMPlusVuePage/src/api/menu.js b/QMPlusVuePage/src/api/menu.js new file mode 100644 index 00000000..04c02a7d --- /dev/null +++ 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', + }) +} \ No newline at end of file diff --git a/QMPlusVuePage/src/api/user.js b/QMPlusVuePage/src/api/user.js index 823bd5ba..c5aadf5f 100644 --- 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 + }) } \ No newline at end of file diff --git a/QMPlusVuePage/src/main.js b/QMPlusVuePage/src/main.js index 14ad568f..2a532b0c 100644 --- 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 diff --git a/QMPlusVuePage/src/permission.js b/QMPlusVuePage/src/permission.js index 2e4a9cff..7436485b 100644 --- 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) => { - next() - // asyncRouterHandle(asyncRouter) // 等待动态使用 VUEX持久化 会将其放入 vuex并且动态生成左侧列表 - // router.addRoutes(asyncRouter) -}) +let asyncRouterFlag = 0 -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" - }] -}] \ No newline at end of file +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() + } + } + // 不在白名单中并且未登陆的时候 + if (!token) { + next({ + name: "login", + query: { + redirect: document.location.hash + } + }) + } + } +}) \ No newline at end of file diff --git a/QMPlusVuePage/src/router/index.js b/QMPlusVuePage/src/router/index.js index 91fe539e..6a639b5c 100644 --- 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' - } ] diff --git a/QMPlusVuePage/src/store/index.js b/QMPlusVuePage/src/store/index.js index 6efab797..c3014ce7 100644 --- 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] }) \ No newline at end of file diff --git a/QMPlusVuePage/src/store/module/router.js b/QMPlusVuePage/src/store/module/router.js new file mode 100644 index 00000000..f95a83ea --- /dev/null +++ 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 + } + } +} \ No newline at end of file diff --git a/QMPlusVuePage/src/store/module/user.js b/QMPlusVuePage/src/store/module/user.js index a482a40e..24b720d1 100644 --- 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) + 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 } } } \ No newline at end of file diff --git a/QMPlusVuePage/src/view/login/login.vue b/QMPlusVuePage/src/view/login/login.vue index c0976549..31291f8a 100644 --- a/QMPlusVuePage/src/view/login/login.vue +++ b/QMPlusVuePage/src/view/login/login.vue @@ -1,35 +1,81 @@ \ No newline at end of file diff --git a/QMPlusVuePage/src/view/login/regist.vue b/QMPlusVuePage/src/view/login/regist.vue index 7945e4ed..604ab31f 100644 --- a/QMPlusVuePage/src/view/login/regist.vue +++ b/QMPlusVuePage/src/view/login/regist.vue @@ -1,16 +1,101 @@ - \ No newline at end of file