fix(login): correct login process

Author: lbwa

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import 'normalize.css'
 import App from './App'
 
-// Including Vue prototype functions (eg. this.$messageBox())
+// Including Vue prototype functions (eg. this.$_plugins_messageBox())
 import './plugins/element.js'
 
 // Shouldn't use Router instance directly without 'PERMISSION/index' processing.

src/permission/index.js

@@ -3,7 +3,7 @@ import store from 'STORE'
 import loginTypes from 'STORE/modules/login/mutations/types'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { tokenFromStorage, usernameFromStorage } from 'UTILS/storage'
+import { tokenFromStorage, userInfoFromStorage } from 'UTILS/storage'
 import { MessageBox } from 'element-ui'
 import createDynamicRoutes from './create-routes'
 import constantRoutes from 'ROUTER/routes/constant'
@@ -97,8 +97,8 @@ router.beforeEach((to, from, next) => {
             tokenFromStorage.getItem()
           )
           store.commit(
-            `login/${loginTypes.SET_USERNAME}`,
-            usernameFromStorage.getItem()
+            `login/${loginTypes.SET_USER_INFO}`,
+            JSON.parse(userInfoFromStorage.getItem()).username
           )
         })
         .then(() => createRoutesMap(to, next))

src/plugins/element.js

@@ -11,13 +11,15 @@ import {
   FormItem,
   Input,
   MessageBox,
+  Message,
   Menu,
   Submenu,
   MenuItem
 } from 'element-ui'
 
 // Prototype functions
-Vue.prototype.$messageBox = MessageBox
+Vue.prototype.$_plugins_messageBox = MessageBox
+Vue.prototype.$_plugins_message = Message
 
 // components using
 vueUsing([

src/store/modules/login/actions.js

@@ -7,25 +7,27 @@ export default {
       username,
       password
     })
-      .then(res => {
-        commit(types.SET_USERNAME, username)
-        commit(types.SET_ACCESS_TOKEN, res.access_token)
-        vm.toggleLoading(false)
-        vm.$router.replace('/home')
+      // eslint-disable-next-line
+      .then(({ user_id, access_token }) => {
+        commit(types.SET_USER_INFO, {
+          username, /* 手机或者是邮箱 */
+          userId: user_id
+        })
+        commit(types.SET_ACCESS_TOKEN, access_token)
       })
       .catch(e => {
         if (e.code === 5000) {
-          vm.$messageBox({
-            title: 'Error',
-            message: 'Wrong username or password',
+          vm.$_plugins_messageBox({
+            title: '警告',
+            message: '错误的用户名或密码',
             type: 'error'
           })
         }
-        console.error(`[Login error]: ${e.code}, ${e.msg}`)
+        console.error(`[Login error]: ${JSON.stringify(e)}`)
       })
   },
   userLogout ({ commit }) {
-    commit(types.SET_USERNAME, '')
+    commit(types.SET_USER_INFO, {})
     commit(types.SET_USER_ROLE, '')
     commit(types.SET_ACCESS_TOKEN, '')
     commit(types.SET_DYNAMIC_ROUTES, [])
@@ -36,6 +38,7 @@ export default {
     location.reload()
   },
   fetchUserAccess ({ commit }, token) {
+    // ! 预留接口：请求用户的权限集合 roles，用于过滤用户的私有路由
     return fetchUserAccess(token)
       .then(({ roles }) => {
         commit(types.SET_USER_ROLE, roles)

src/store/modules/login/getters.js

@@ -1,6 +1,6 @@
 export default {
   username (state) {
-    return state.username
+    return (state.userInfo && state.userInfo.username) || '无用户名'
   },
   accessToken (state) {
     return state.accessToken

src/store/modules/login/mutations/index.js

@@ -1,12 +1,12 @@
 import types from './types'
-import { tokenFromStorage, usernameFromStorage } from 'UTILS/storage'
+import { tokenFromStorage, userInfoFromStorage } from 'UTILS/storage'
 
 export default {
-  [types.SET_USERNAME] (state, username) {
-    username
-      ? usernameFromStorage.setItem(username)
-      : usernameFromStorage.removeItem()
-    state.username = username
+  [types.SET_USER_INFO] (state, userInfo) {
+    userInfo
+      ? userInfoFromStorage.setItem(userInfo)
+      : userInfoFromStorage.removeItem()
+    state.userInfo = userInfo
   },
   [types.SET_ACCESS_TOKEN] (state, accessToken) {
     accessToken

src/store/modules/login/mutations/types.js

@@ -1,5 +1,5 @@
 export default {
-  SET_USERNAME: 'SET_USERNAME',
+  SET_USER_INFO: 'SET_USER_INFO',
   SET_ACCESS_TOKEN: 'SET_ACCESS_TOKEN',
   SET_USER_ROLE: 'SET_USER_ROLE',
   SET_DYNAMIC_ROUTES: 'SET_DYNAMIC_ROUTES',

src/store/modules/login/state.js

@@ -1,5 +1,8 @@
 export default {
-  username: '',
+  userInfo: {
+    userId: '',
+    username: ''
+  },
   accessToken: '',
   role: '',
   dynamicRoutes: [],

src/utils/storage.js

@@ -1,5 +1,5 @@
-const TOKEN_KEY = '__tk__'
-const USERNAME_KEY = '__usn__'
+const TOKEN_KEY = '$_tk'
+const USER_INFO_KEY = '$_usn'
 
 function setValueToLocal (key, val, storage) {
   const normalizeVal = typeof val === 'string'
@@ -24,4 +24,4 @@ function createStorageUtils (key, storage = localStorage) {
 
 export const tokenFromStorage = createStorageUtils(TOKEN_KEY, localStorage)
 
-export const usernameFromStorage = createStorageUtils(USERNAME_KEY, localStorage)
+export const userInfoFromStorage = createStorageUtils(USER_INFO_KEY, localStorage)