第三天学习总结

1、项目中你是如何获取用户资料并在vuex中共享的

逐字稿：我们将用户资料的获取放在前置守卫里面处理，这样做可以使得每个组件都能够获取到用户资料。具体步骤是：我们先判断是否有token,有的话我们再判断用户若用户访问非登录界面，我们再判断是否有用户信息，没有的话我们此时会派发dispatch事件，通过调用获取用户信息接口后将返回的信息存入state里面，考虑到vuex在界面刷新的时候里面的值被清空，所以需要将其进行localstorage存储。

router.beforeEach(async(to, form, next) => {
  nProgress.start()// 开启进度条
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/')
      nProgress.done()// 关闭进度条
    } else {
      if (!store.getters.userId1) {
        await store.dispatch('user/updateUserInfo')
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      nProgress.done()// 关闭进度条
    }
  }
})

2、项目中若token失效你是如何处理的

逐字稿：当token失效的时候，后端会返回对应的业务码，我们在拦截器中对这个业务码进行判断，若存在说明token失效；接下来我们首先清除token和用户信息，然后将界面跳转到登录页。

//拦截器中token失效的处理 error.message
  if (error.response.status === 401) {
    store.dispatch('user/delTokenMsg')
    router.push('/login')
  }
  Message({ type: 'error', message: error.response.data.message })
  return Promise.reject(error)

 // store中配合拦截器对token失效的处理
 export default {
  namespaced: true,
  state: {
    token: getToken(),
    userInfo: {}
  },
  mutations: {
    updataToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    removeToken(state) {
      state.token = null
      removeToken()
    },
    getUserInfo(state, newInfo) {
      state.userInfo = newInfo
    }
  },
  actions: {
    // 在用户退出登录和token失效时封装清除token和用户信息代码
    delTokenMsg(context) {
      context.commit('removeToken')
      context.commit('getUserInfo', {})
    },
    // 用户token
    async updataTokenAsync(context, data) {
      const token = await login(data)
      context.commit('updataToken', token)
    },
    // 用户信息
    async updateUserInfo(context) {
      // 调用获取用户信息接口
      const data = await userInfoData()
      context.commit('getUserInfo', data)
    }
  }
}

第四天学习总结

1、解析左侧菜单的渲染

逐字稿：

通过计算属性引入路由
在slidebaritem组件中，通过v-if判断路由中定义的hidden属性是否存在，若不存在则渲染item
遍历路由生成的sidebar-item
渲染生成的图标和标题

2、树形组件的应用

逐字稿：A、树形插件用到的是elementui里面的el-tree插件，这个插件里面用到三个属性设置dtta(绑定数据)、props(设置属性)、default-expand-all(是否展开所有节点，默认都展开)。B、树形组件接收的是树形数据，所以若后端返回的数据为列表数据，我们需要将列表数据转换为属性数据

3、递归将列表数据转换树形数据

逐字稿：此项目里面运用到了后端返回的数据中，子部门的pid与父级部门的id一致的特点，我们先将转换树形数据的函数定义为translateListToTreeData,里面传递list(后端返回的数据)和rootValue(一级部门的id,默认为0)，里面定义个空数组arr，后将list运用forEach进行遍历，在判断list里面的每一项中的item.id是否与rootValue相等。接着，定义个常量chidren = translateListToTreeData(list, item.id)进行递归的操作。再进行children的非空判断，若非空则item.children = children; arr.push(item);

export const translateListToTreeData = (list, rootVal) => {
  const arr = []
  list.forEach(item => {
    if (item.pid === rootVal) {
      const children = translateListToTreeData(list, item.id)
      if (children.length) item.children = children
      arr.push(item)
    }
  })
  return arr
}

第三/四天学习总结