记vue-element-admin开发中的几个问题及解决方案

最近在做vue-element-admin的项目中，遇到一些问题，写个博客记录一下问题及其解决方案

axios响应拦截的error里如何获取后台传过来的错误信息

因为后台传过来的错误信息里用中文提醒，页面需要显示这些提醒，所以在进行操作时，
要使用error.response才能获取到后台传过来的错误信息，然后进行响应处理，

service.interceptors.response.use(
response => {
     
    const res = response.data
     if (res.code !== 0 && res.active != true) {
     
       return Promise.reject(res || 'Error')
    } else {
     
      return res
    }
  },
  (error) => {
      //这里要用error.response才能取到后台接口返回的信息
     let Warings = error.response.data.msg.match(/([\u4e00-\u9fa5])+/g) //匹配中文
     if(error.response.data.code == 1&&error.response.data.msg.match(/([\u4e00-\u9fa5])+/g).length >= 1){
     
     var err;
     if(error.response.data.msg.match(/([\u4e00-\u9fa5])+/g).length == 2 ){
     
        err = new Error(`${
       Warings[0]},${
       Warings[1]}!`||'Error')
        err.name = '错误'

      }else{
     
         err = new Error(`${
       Warings[0]}!`||'Error')
         err.name = '错误'
    return Promise.reject(err|| 'error')
  }
  }

使用element-ui的项目打包放到线上时，偶尔会出现图标乱码的情况见下图

解决方法，卸载掉sass,安装4.x版本的node-sass,
1.npm uninstall sass
2.npm install node-sass (错误)
2.npm install [email protected] -S
原因：elementui 源码使用的是 node-sass，所以使用原有的sass在打包时会使得代码出现乱码的情况，像这样

而至于为什么要下载4.x版本的，因为此sass-loader，因为node-sass @latest为v5.0.0，而sass-loader期望值为^ 4.0.0。
一顿操作后看下打包以后的app.css

大功告成

根据角色不同进入不同主页

刚开始拿到感觉这个需求很简单，因为vue-element-admin本身就有这种权限验证功能，但是在实际开发时，发现无法在路由中直接控制，只好在登录页面中判断

 handleLogin() {
     
      var that = this
      this.$refs.loginForm.validate((valid) => {
     
        if (valid) {
     
          this.loading = true;
          console.log(this.loginForm)
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(async (response) => {
     
              // console.log(this)
              const {
     
                roles,
                firstFlag,
                id
              } = await this.$store.dispatch('user/getInfo')
              const accessRoutes = await this.$store.dispatch('permission/generateRoutes', roles)

              // dynamically add accessible routes
              this.$router.addRoutes(accessRoutes)
              console.log(roles)
              if (roles == 'ORGANIZE') {
     
                this.$router.push({
     
                  path: "/org-admin-org",
                  query: this.otherQuery,
                });
              } else {
     
                this.$router.replace({
     
                  path: '/',
                  query: this.otherQuery,
                });
              }
              this.loading = false;
            })
            }

验证登录后要发送请求获取角色信息，但是这还不够，后面这两步才是关键·
const accessRoutes = await this.$store.dispatch(‘permission/generateRoutes’, roles)

this.$router.addRoutes(accessRoutes)
有了这两步才算成功，至于为什么，我理解就是前端要拿到这个用户的路由表才能允许你跳转，不是你角色给我我就允许你跳