javascript - 为什么我的 setAdmin 在 getAdmin 之后运行？

Question

我的 MenuAdmin 没有在首次访问时加载。重新加载页面（f5）后，MenuAdmin 正常加载。我是 Vue.js 和异步应用程序的新手。我相信 setAdmin 将设置在 getAdmin 旁边，但我不能 100% 确定。

这是我的代码：Index.js：

import Vue from 'vue'
import Router from 'vue-router'
import { getAdminBx } from '@/utils/auth'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: {
          title: 'Painel',
          icon: 'dashboard',
          affix: true
        }
      }
    ]
  }
]

const async = [
  { path: '*', redirect: '/404', hidden: true }
]

const hasAdmin = getAdminBx()
console.log('indexGetAdmin = ' + hasAdmin)

if (hasAdmin === true) {
  async.push(adminRouter)
}

export const asyncRoutes = async

// async.push(modulesRouter)

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

我的 auth.js：

import store from '@/store'

const TokenKey = 'PermiApiToken'
const TokenBxKey = 'PermiBxToken'
const AdminBxKey = 'PermiBxAdmin'
const UserInfoBxKey = 'PermiBxUserInfo'

export function setAdminBx(value) {
  const result = localStorage.setItem(AdminBxKey, value)
  console.log('setAdminBx: ' + value)
  return result
}

export function getAdminBx() {
  const result = localStorage.getItem(AdminBxKey)
  console.log('getAdminBxResult: ' + result)
  return result
}

export function setToken(token) {
  const result = localStorage.setItem(TokenKey, token)
  return result
}

export function getToken() {
  const result = localStorage.getItem(TokenKey)
  return result
}

export function removeToken() {
  const result = localStorage.removeItem(TokenKey)
  return result
}

export function setTokenBx(token) {
  const result = localStorage.setItem(TokenBxKey, token)
  return result
}

export function getTokenBx() {
  var result = localStorage.getItem(TokenBxKey)
  if (result === 'undefined') {
    result = null
  }
  return result
}

export function removeTokenBx() {
  const result = localStorage.removeItem(TokenBxKey)
  return result
}

export function setUserInfoBx(userInfo) {
  const userInfoStr = JSON.stringify(userInfo)
  const result = localStorage.setItem(UserInfoBxKey, userInfoStr)
  return result
}

export function getUserInfoBx() {
  var result = localStorage.getItem(UserInfoBxKey)
  if (result != null) {
    result = JSON.parse(result)
  }
  return result
}

export function getUserInfoToApi() {
  var userInfo = {}
  var deptoId = {}
  store.dispatch('bx_users/getInfoUserBx')
  if (store.state.bx_users.bx_userinfo.UF_DEPARTMENT) {
    deptoId = store.state.bx_users.bx_userinfo.UF_DEPARTMENT.join(',')
    userInfo = {
      userId: parseInt(getUserInfoBx().ID),
      deptoId: deptoId
    }
  } else {
    userInfo = {
      userId: parseInt(getUserInfoBx().ID)
    }
  }
  return userInfo
}

我的 bx_users.js：

import { getTokenBx, setTokenBx, removeTokenBx, getUserInfoBx, setAdminBx } from '@/utils/auth'
import { getUserCurrent, getUserAdmin } from '@/api/bx/user'

const state = {
  bx_token: getTokenBx(),
  bx_name: '',
  bx_userinfo: ''
}

const mutations = {
  SET_TOKEN: (state, value) => {
    state.bx_token = value
  },
  SET_USERINFO: (state, value) => {
    state.bx_userinfo = value
  },
  SET_USERADMIN: (state, value) => {
    state.bx_useradmin = value
  },
  SET_EXPIRES: (state, value) => {
    state.bx_expires = value
  },
  SET_REFRESH: (state, value) => {
    state.bx_refresh = value
  },
  SET_MEMBER: (state, value) => {
    state.bx_member = value
  },
  SET_DOMAIN: (state, value) => {
    state.bx_domain = value
  },
  SET_USERID: (state, value) => {
    state.bx_user_id = value
  },
  SET_NAME: (state, value) => {
    state.bx_name = value
  },
  SET_LAST: (state, value) => {
    state.bx_lastname = value
  },
  SET_ACTIVE: (state, value) => {
    state.bx_active = value
  },
  SET_EMAIL: (state, value) => {
    state.bx_email = value
  },
  SET_DEPARTMENT: (state, value) => {
    state.bx_department = value
  }
}

const actions = {
  getUserBx({ commit }) {
    const userInfo = getUserInfoBx()
    const url = userInfo.DOMAIN
    const token = userInfo.AUTH_ID
    const id = userInfo.ID
    commit('SET_USERID', id)
    commit('SET_TOKEN', token)
    commit('SET_DOMAIN', url)
    commit('SET_EXPIRES', userInfo.AUTH_EXPIRES)
    commit('SET_REFRESH', userInfo.REFRESH_ID)
    commit('SET_MEMBER', userInfo.member_id)
    return new Promise((resolve, reject) => {
      getUserAdmin(url, token)
        .then(response => {
          commit('SET_USERADMIN', response.result)
          setAdminBx(response.result)
          resolve()
        }).catch(error => {
          reject(error)
        })
      getUserCurrent(url, token)
        .then(response => {
          commit('SET_USERINFO', response.result)
          setTokenBx(token)
          resolve()
        }).catch(error => {
          reject(error)
        })
    })
  },

  getInfoUserBx({ commit }) {
    const userInfo = getUserInfoBx()
    const url = userInfo.DOMAIN
    const token = userInfo.AUTH_ID
    const id = userInfo.ID
    commit('SET_USERID', id)
    commit('SET_TOKEN', token)
    commit('SET_DOMAIN', url)
    commit('SET_EXPIRES', userInfo.AUTH_EXPIRES)
    commit('SET_REFRESH', userInfo.REFRESH_ID)
    commit('SET_MEMBER', userInfo.member_id)
    return new Promise((resolve, reject) => {
      getUserCurrent(url, token)
        .then(response => {
          commit('SET_USERINFO', response.result)
          resolve()
        }).catch(error => {
          reject(error)
        })
    })
  },

  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      removeTokenBx()
      resolve()
    })
  }
}

export default {
  actions,
  namespaced: true,
  state,
  mutations
}

我的 main.js：

import Cookies from 'js-cookie'

import store from './store'
import App from './App'
import router from './router'

import Vue from 'vue'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/pt-br'
import './styles/element-variables.scss'

import '@/styles/index.scss' // global css
import '@/styles/custom.css' // custom css

import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log
import './utils/auth'

import * as filters from './filters' // global filters

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import i18n from './lang' // Internationalization

import utf8 from 'utf8'
Vue.use(utf8)

import VueHead from 'vue-head'
Vue.use(VueHead)

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('fa-icon', FontAwesomeIcon)

import VueMoment from 'vue-moment'
Vue.use(VueMoment)

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

import { DataTables, DataTablesServer } from 'vue-data-tables'
Vue.use(DataTables)
Vue.use(DataTablesServer)

import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.component('v-icon', Icon)

import FullCalendar from 'vue-full-calendar'
Vue.use(FullCalendar)

import money from 'v-money'
Vue.use(money)

import VueCurrencyFilter from 'vue-currency-filter'
Vue.use(VueCurrencyFilter,
  {
    symbol: '',
    thousandsSeparator: '.',
    fractionCount: 2,
    fractionSeparator: ',',
    symbolPosition: '',
    symbolSpacing: false
  })

import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

import VueSession from 'vue-session'
Vue.use(VueSession, { persist: true })

import base64 from 'base-64'
Vue.use(base64)

import { mockXHR } from '../mock'
mockXHR()

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value),
  locale
})

// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  router,
  i18n,
  render: h => h(App)
})

我的应用程序.vue：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>

export default {
  name: 'App',
  created() {
  },
  mounted() {
  }
}
</script>

在第一次访问中，我得到了： 图像优先访问

重新加载页面后（f5）： 重新加载后的图像

为什么我只是在首次访问时得到空值？我很感激任何帮助

标签： javascriptvue.jsasynchronous