Element UI框架踩坑记录

为什么要记录这个

目前正在开发一个基于vue的在线学习网站，使用的是Element UI框架，这是我使用这个框架做的第二个前端项目，仍然还有很多东西不懂，正在慢慢摸索成长。所以我想把我新学习到的东西记录下来，如果我记录的东西能够让同样在学习这个框架的人，或者说遇到相同问题的人一点帮助的话就更好了。一起加油吧~
另外，系统整体架构使用的是github上很火的一个 PanJiaChen /vue-element-admin框架，下面的问题都是基于这个我本身的项目对该框架的一些修改。

权限控制（含token）

先说一下原项目的身份权限，分为admin和editor两个，接口为本地接口。权限控制主要应用在登录功能中，即使用同一个登录页面可以实现不同账号登录后呈现不同的页面效果。这就需要我们获取后端返回的身份roles数组（这里要数组因为框架需要的是数组，我就没改动也让后端返回数组了）。
针对我自己项目的改造在于给utils/auth.js文件中新增setUserInfo()和getUserInfo()这两个方法，目的在于将接口中获取用户的信息保存到cookie中。

// 具体代码，判断userInfo和userName是否存在，如果存在则保存
export function setUserInfo(userInfo) {
 if (userInfo && userInfo.userName) {
   return Cookies.set(UserInfoKey, userInfo)
 }
 return null
}

export function getUserInfo() {
 const userInfo = Cookies.getJSON(UserInfoKey)
 if (userInfo && userInfo.userName) {
   return userInfo
 }
 return null
}

然后修改store/modules/user.js文件中actions的login方法，使用刚才写好的两个函数进行改写。

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password })
        .then(response => {
          const { data } = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          setUserInfo(data.user.userInfo)
          resolve()
        })
        .catch(error => {
          reject(error)
        })
    })
  }

路由显示

权限设置好后，能够实现不同身份的用户进行登录。我项目一共有三个身份，分别为student、teacher和admin。我在router/index.js中设置好不同页面的路由后，发现一个很奇怪的问题，那就是除了对应权限的用户能够看到属于自己的路由外，admin竟然能够额外看到student的所有路由。我不希望admin能看到学生端的路由，但是我确认了好多遍设置路由的界面并没有写错。后面就发现了问题所在——在store/modules/permission.js中，admin设置为能够看到所有的路由。所以就算我设置了某些页面仅学生端可见，但是admin中并没有起作用。于是进行如下代码改造——

generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        // 下面这句是注释掉的源代码
        // accessedRoutes = asyncRoutes || []
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }

只要将admin中的路由改成和普通路由一样进行控制就可以正常显示了。其实也可以直接把if语句删掉，但是为了能够记得犯下的这个错暂时保留。

总结

说实话这两个问题困扰了我好久，这算是第一次真正去研究框架内部的文件。之前一直都是在src/views里面写页面、连接口等等。把感想和改造步骤记录下来，便于以后回顾。因为要准备前端面试找工作了，所以后面还会更新一些前端的问题，希望我能坚持下来~