feat: adjust set login/SET_ROLE strategy

mock/server/config/routes.js

@@ -10,8 +10,7 @@ module.exports = {
       avatar: 'https://assets-cdn.github.com/favicon.ico',
       notify: 12,
       position: '前端开发',
-      department: '蚂蚁金服－某某某事业群－某某平台部－某某技术部',
-      role: [req.query.role || 'admin']
+      department: '蚂蚁金服－某某某事业群－某某平台部－某某技术部'
     })
   },
 
@@ -27,19 +26,19 @@ module.exports = {
 
   'POST /api/login': (req, res) => {
     const { username, password, token } = req.body
-    if (username === 'admin' && password === 'pro') {
+    if ((username === 'admin' || username === 'user') && password === 'pro') {
       res.send({
         errno: 0,
         status: 'ok',
         token: token ? token : Math.random().toString(16).slice(2),
-        currentAuthority: 'admin'
+        role: [username]
       })
       return
     }
     res.send({
       errno: 1,
       status: 'error',
-      currentAuthority: 'guest'
+      role: ['user']
     })
   },
 

src/router/index.js

@@ -24,15 +24,8 @@ router.beforeEach((to, from, next) => {
   // get token from sessionStorage
   if (getTokenFromLocal()) {
     // fetch user info
-    if (!store.getters['login/role'].length && to.path !== '/') {
-      store.dispatch('login/fetchUserInfo')
-        .then((userInfo) => {
-          // Preset dynamic routes is used to create new global routes map,
-          // filtered by `role` variable.
-          store.dispatch('login/createExtraRoutes', userInfo)
-            .then(() => router.addRoutes(store.getters['login/addRoutes']))
-        })
-        .catch(console.error)
+    if (!store.getters['login/userInfo'].name && to.path !== '/') {
+      store.dispatch('login/fetchUserInfo').catch(console.error)
     }
     next()
   } else {

src/services/index.js

@@ -1,6 +1,5 @@
 import baseRequest from './base'
 import * as routes from './routes'
-import qs from 'querystring'
 
 // `POST` methods should be throttled in production mode
 export function pushLogin (userInfo) {
@@ -15,12 +14,8 @@ export function pushBasicForm (formData) {
   return baseRequest.post(routes.FORM_BASIC, formData)
 }
 
-export function fetchUserInfo (query) {
-  const url = query
-    ? `${routes.CURRENT_USER}?${qs.stringify(query)}`
-    : routes.CURRENT_USER
-
-  return baseRequest.get(url)
+export function fetchUserInfo () {
+  return baseRequest.get(routes.CURRENT_USER)
 }
 
 export function fetchAllAnalysis () {

src/store/modules/login/actions.js

@@ -1,5 +1,6 @@
 import { pushLogin, fetchUserInfo } from 'SERVICES'
 import { setTokenToLocal, removeToken } from 'AUTH'
+import router from 'ROUTER'
 import { dynamicRoutes } from 'ROUTER/routes'
 import types from './mutations/types'
 import { Notification } from 'element-ui'
@@ -8,20 +9,29 @@ import { Notification } from 'element-ui'
 const ADMINISTRATOR = 'admin'
 
 export default {
-  pushLogin ({ commit, dispatch }, { userInfo, replace }) {
+  pushLogin ({ commit, dispatch, getters }, { userInfo, replace }) {
     return pushLogin(userInfo)
       .then(res => {
         const data = res.data
         if (data.errno !== 0) throw new Error(`用户名或密码错误`)
-        if (!data.token) throw new Error(`[Token]: empty token`)
+        if (!data.token) throw new Error(`[Token]: Wrong token response`)
+        if (!Array.isArray(data.role)) throw new Error(`[Role]: Wrong role response`)
         return data
       })
       .then(data => {
         Notification.success({
           title: 'Success',
           message: '登陆成功，正在跳转...'
         })
+        commit(types.SET_ROLE, data.role)
         commit(types.SET_TOKEN, data.token)
+
+        // Preset dynamic routes is used to create new global routes map,
+        // filtered by `role` variable.
+        // action named createExtraRoutes should follow mutation named SET_ROLE
+        dispatch('createExtraRoutes', { role: data.role })
+          .then(() => router.addRoutes(getters.addRoutes))
+
         setTokenToLocal({ token: data.token })
         replace('/dashboard/analysis')
       })
@@ -38,10 +48,7 @@ export default {
       .then(res => res.data)
       .then(data => {
         if (data.errno !== 0) throw new Error(`[errno]: ${data.errno}`)
-        if (!Array.isArray(data.role)) throw new Error(`[role]: ${data.role}`)
         commit(types.SET_USER_INFO, data)
-        commit(types.SET_USERNAME, data.name)
-        commit(types.SET_ROLE, data.role)
         return data
       })
       .catch(console.error)
@@ -65,7 +72,6 @@ export default {
   },
   logout ({ commit }, replace) {
     commit(types.SET_USER_INFO, {})
-    commit(types.SET_USERNAME, '')
     commit(types.SET_ROLE, [])
     commit(types.SET_TOKEN, '')
     removeToken()

src/store/modules/login/getters.js

@@ -1,7 +1,7 @@
 // We do not use `state` directly for strong scalability.
 export default {
-  username (state) {
-    return state.username
+  userInfo (state) {
+    return state.userInfo
   },
   role (state) {
     return state.role

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

@@ -5,9 +5,6 @@ export default {
   [types.SET_USER_INFO] (state, userInfo) {
     state.userInfo = userInfo
   },
-  [types.SET_USERNAME] (state, username) {
-    state.username = username
-  },
   [types.SET_ROLE] (state, role) {
     state.role = role
   },

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

@@ -1,6 +1,5 @@
 export default {
   SET_USER_INFO: 'SET_USER_INFO',
-  SET_USERNAME: 'SET_USERNAME',
   SET_ROLE: 'SET_ROLE',
   SET_TOKEN: 'SET_TOKEN',
   SET_ROUTES: 'SET_ROUTES'

src/store/modules/login/state.js

@@ -2,7 +2,6 @@ import { commonRoutes } from 'ROUTER/routes'
 
 export default {
   userInfo: {},
-  username: '',
   role: [],
   token: '',
   routes: commonRoutes, // store current global routes map

src/view/Login.vue

@@ -16,7 +16,7 @@
     >
       <el-form-item prop="username">
         <el-input
-          placeholder="Username: admin"
+          placeholder="Username: admin/user"
           v-model="loginForm.username"
           clearable>
           <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>