refine code

Author: PanJiaChen

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)',

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

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()',

mock/login.js renamed to mock/user.js

@@ -1,47 +1,56 @@
-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]
-    }
-  },
-  {
-    url: '/login/logout',
-    type: 'post',
-    response: _ => {
-      return {
-        data: 'success'
-      }
+      return tokens[username]
     }
   },
+
+  // get user info
   {
     url: '/user/info\.*',
     type: 'get',
     response: config => {
       const { token } = config.query
-      if (userMap[token]) {
-        return userMap[token]
-      } else {
-        return false
+      return users[token]
+    }
+  },
+
+  // user logout
+  {
+    url: '/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        data: 'success'
       }
     }
   }

src/api/login.js renamed to src/api/user.js

@@ -1,29 +1,25 @@
 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() {
+export function getInfo(token) {
   return request({
-    url: '/login/logout',
-    method: 'post'
+    url: '/user/info',
+    method: 'get',
+    params: { token }
   })
 }
 
-export function getUserInfo(token) {
+export function logout() {
   return request({
-    url: '/user/info',
-    method: 'get',
-    params: { token }
+    url: '/user/logout',
+    method: 'post'
   })
 }
 

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
       })
     }

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: '/' })
             })

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

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.')
+        getInfo(state.token).then(response => {
+          const { data } = response
+
+          if (!data) {
+            reject('Verification failed, please Login again.')
           }
-          const data = response.data
 
-          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', data.roles)
-          } else {
+          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()
         })
       })

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
   //         })
   //       })