From 8b382e1e15d935c5660fb9429d4e1b11a354235f Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 18 Mar 2019 18:07:55 +0800 Subject: [PATCH] refine code --- mock/article.js | 2 +- mock/mocks.js | 4 +- mock/remoteSearch.js | 10 +- mock/{login.js => user.js} | 51 ++++--- src/api/{login.js => user.js} | 24 ++-- src/layout/components/Navbar.vue | 2 +- src/permission.js | 8 +- src/store/modules/permission.js | 2 +- src/store/modules/user.js | 84 ++++------- src/utils/request.js | 2 +- src/views/login/authredirect.vue | 11 +- src/views/login/index.vue | 130 ++++++++++-------- .../permission/components/SwitchRoles.vue | 2 +- 13 files changed, 167 insertions(+), 165 deletions(-) rename mock/{login.js => user.js} (62%) rename src/api/{login.js => user.js} (57%) diff --git a/mock/article.js b/mock/article.js index c7b7d3f5..c6914cd7 100644 --- a/mock/article.js +++ b/mock/article.js @@ -13,7 +13,7 @@ for (let i = 0; i < count; i++) { author: '@first', reviewer: '@first', title: '@title(5, 10)', - content_short: '我是测试数据', + content_short: 'mock data', content: baseContent, forecast: '@float(0, 100, 2, 2)', importance: '@integer(1, 3)', diff --git a/mock/mocks.js b/mock/mocks.js index 67815b97..84a25ddc 100644 --- a/mock/mocks.js +++ b/mock/mocks.js @@ -1,10 +1,10 @@ -import login from './login' +import user from './user' import role from './role' import article from './article' import search from './remoteSearch' export default [ - ...login, + ...user, ...role, ...article, ...search diff --git a/mock/remoteSearch.js b/mock/remoteSearch.js index 9cdcd376..28519f5c 100644 --- a/mock/remoteSearch.js +++ b/mock/remoteSearch.js @@ -8,9 +8,10 @@ for (let i = 0; i < count; i++) { name: '@first' })) } -NameList.push({ name: 'mockPan' }) +NameList.push({ name: 'mock-Pan' }) export default [ + // username search { url: '/search/user', type: 'get', @@ -23,14 +24,15 @@ export default [ return { items: mockNameList } } }, + + // transaction list { url: '/transaction/list', type: 'get', response: _ => { - const count = 20 return { - total: count, - [`items|${count}`]: [{ + total: 20, + 'items|20': [{ order_no: '@guid()', timestamp: +Mock.Random.date('T'), username: '@name()', diff --git a/mock/login.js b/mock/user.js similarity index 62% rename from mock/login.js rename to mock/user.js index 5f9174b0..e9830e91 100644 --- a/mock/login.js +++ b/mock/user.js @@ -1,48 +1,57 @@ -const userMap = { + +const tokens = { admin: { + token: 'admin-token' + }, + editor: { + token: 'editor-token' + } +} + +const users = { + 'admin-token': { roles: ['admin'], - token: 'admin', - introduction: '我是超级管理员', + introduction: 'I am a super administrator', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Super Admin' }, - editor: { + 'editor-token': { roles: ['editor'], - token: 'editor', - introduction: '我是编辑', + introduction: 'I am an editor', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Normal Editor' } } export default [ + // user login { - url: '/login/login', + url: '/user/login', type: 'post', response: config => { const { username } = config.body - return userMap[username] + return tokens[username] } }, + + // get user info { - url: '/login/logout', + url: '/user/info\.*', + type: 'get', + response: config => { + const { token } = config.query + return users[token] + } + }, + + // user logout + { + url: '/user/logout', type: 'post', response: _ => { return { data: 'success' } } - }, - { - url: '/user/info\.*', - type: 'get', - response: config => { - const { token } = config.query - if (userMap[token]) { - return userMap[token] - } else { - return false - } - } } ] diff --git a/src/api/login.js b/src/api/user.js similarity index 57% rename from src/api/login.js rename to src/api/user.js index a64935c3..a8052005 100644 --- a/src/api/login.js +++ b/src/api/user.js @@ -1,25 +1,14 @@ import request from '@/utils/request' -export function loginByUsername(username, password) { - const data = { - username, - password - } +export function login(data) { return request({ - url: '/login/login', + url: '/user/login', method: 'post', data }) } -export function logout() { - return request({ - url: '/login/logout', - method: 'post' - }) -} - -export function getUserInfo(token) { +export function getInfo(token) { return request({ url: '/user/info', method: 'get', @@ -27,3 +16,10 @@ export function getUserInfo(token) { }) } +export function logout() { + return request({ + url: '/user/logout', + method: 'post' + }) +} + diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 50a380e7..8e87db14 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -83,7 +83,7 @@ export default { this.$store.dispatch('toggleSideBar') }, logout() { - this.$store.dispatch('LogOut').then(() => { + this.$store.dispatch('Logout').then(() => { location.reload()// In order to re-instantiate the vue-router object to avoid bugs }) } diff --git a/src/permission.js b/src/permission.js index 25b6812f..6b770f01 100644 --- a/src/permission.js +++ b/src/permission.js @@ -29,18 +29,18 @@ router.beforeEach((to, from, next) => { if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 store - .dispatch('GetUserInfo') + .dispatch('getInfo') // dispatch @/store/modules/user login getInfo .then(res => { // 拉取user_info - const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}] - store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => { + const { roles } = res // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}] + store.dispatch('generateRoutes', { roles }).then(accessRoutes => { // 根据roles权限生成可访问的路由表 router.addRoutes(accessRoutes) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }) }) .catch(err => { - store.dispatch('FedLogOut').then(() => { + store.dispatch('resetToken').then(() => { Message.error(err) next({ path: '/' }) }) diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js index fba03bc3..835b4d09 100644 --- a/src/store/modules/permission.js +++ b/src/store/modules/permission.js @@ -46,7 +46,7 @@ const permission = { } }, actions: { - GenerateRoutes({ commit }, data) { + generateRoutes({ commit }, data) { return new Promise(resolve => { const { roles } = data let accessedRoutes diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 38e81a36..462bb42f 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,37 +1,22 @@ -import { loginByUsername, logout, getUserInfo } from '@/api/login' +import { login, logout, getInfo } from '@/api/user' import { getToken, setToken, removeToken } from '@/utils/auth' const user = { state: { - user: '', - status: '', - code: '', token: getToken(), name: '', avatar: '', introduction: '', - roles: [], - setting: { - articlePlatform: [] - } + roles: [] }, mutations: { - SET_CODE: (state, code) => { - state.code = code - }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, - SET_SETTING: (state, setting) => { - state.setting = setting - }, - SET_STATUS: (state, status) => { - state.status = status - }, SET_NAME: (state, name) => { state.name = name }, @@ -44,12 +29,12 @@ const user = { }, actions: { - // 用户名登录 - LoginByUsername({ commit }, userInfo) { - const username = userInfo.username.trim() + // user login + login({ commit }, userInfo) { + const { username, password } = userInfo return new Promise((resolve, reject) => { - loginByUsername(username, userInfo.password).then(response => { - const data = response.data + login({ username: username.trim(), password: password }).then(response => { + const { data } = response commit('SET_TOKEN', data.token) setToken(response.data.token) resolve() @@ -59,48 +44,36 @@ const user = { }) }, - // 获取用户信息 - GetUserInfo({ commit, state }) { + // get user info + getInfo({ commit, state }) { return new Promise((resolve, reject) => { - getUserInfo(state.token).then(response => { - // 由于mockjs 不支持自定义状态码只能这样hack - if (!response.data) { - reject('Verification failed, please login again.') - } - const data = response.data + getInfo(state.token).then(response => { + const { data } = response - if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组 - commit('SET_ROLES', data.roles) - } else { + if (!data) { + reject('Verification failed, please Login again.') + } + + const { roles } = data + + // roles must be a non-empty array + if (!roles || roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } + commit('SET_ROLES', data.roles) commit('SET_NAME', data.name) commit('SET_AVATAR', data.avatar) commit('SET_INTRODUCTION', data.introduction) - resolve(response) + resolve(data) }).catch(error => { reject(error) }) }) }, - // 第三方验证登录 - // LoginByThirdparty({ commit, state }, code) { - // return new Promise((resolve, reject) => { - // commit('SET_CODE', code) - // loginByThirdparty(state.status, state.email, state.code).then(response => { - // commit('SET_TOKEN', response.data.token) - // setToken(response.data.token) - // resolve() - // }).catch(error => { - // reject(error) - // }) - // }) - // }, - - // 登出 - LogOut({ commit, state }) { + // user logout + Logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { commit('SET_TOKEN', '') @@ -113,27 +86,28 @@ const user = { }) }, - // 前端 登出 - FedLogOut({ commit }) { + // remove token + resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') + commit('SET_ROLES', []) removeToken() resolve() }) }, // 动态修改权限 - ChangeRoles({ commit, dispatch }, role) { + changeRoles({ commit, dispatch }, role) { return new Promise(resolve => { commit('SET_TOKEN', role) setToken(role) - getUserInfo(role).then(response => { + getInfo(role).then(response => { const data = response.data commit('SET_ROLES', data.roles) commit('SET_NAME', data.name) commit('SET_AVATAR', data.avatar) commit('SET_INTRODUCTION', data.introduction) - dispatch('GenerateRoutes', data) // 动态修改权限后 重绘侧边菜单 + dispatch('generateRoutes', data) // 动态修改权限后 重绘侧边菜单 resolve() }) }) diff --git a/src/utils/request.js b/src/utils/request.js index 47237685..70cf881b 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -53,7 +53,7 @@ service.interceptors.response.use( // cancelButtonText: '取消', // type: 'warning' // }).then(() => { - // store.dispatch('FedLogOut').then(() => { + // store.dispatch('resetToken').then(() => { // location.reload() // 为了重新实例化vue-router对象 避免bug // }) // }) diff --git a/src/views/login/authredirect.vue b/src/views/login/authredirect.vue index e749412b..69e15397 100644 --- a/src/views/login/authredirect.vue +++ b/src/views/login/authredirect.vue @@ -1,10 +1,15 @@ diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 352df494..0a4f82f0 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,6 +1,7 @@