vue.admin.element框架左侧权限控制，后台获取角色数据

vue.admin框架是一款基于vue 使用 element-ui 的一套后台管理框架，由于业务需要动态展示左侧菜单来控制使用者的权限。废话不多说。

首先，找到登录的页面 /src/views/login/index.vue

方法首先验证的是表单数据是否符合要求，然后去src/store/modules/user文件中找到 login方法，这才是真正的跳转到后台校验数据的方法，this.loginForm 参数是将页面获取到的账号密码传到login方法供后台对比。

 handleLogin() {
   
      this.$refs.loginForm.validate(valid => {
   
        if (valid) {
   
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
   
              this.$router.push({
    path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
   
              this.loading = false
            })
        } else {
   
          console.log('error submit!!')
          return false
        }
      })
    },

然后定位到 /src/store/modules/user.js文件

将数据传过来之后，我使用userInfo接收然后台对比，后台生成用户token返回到前台存起来。
request.js文件中，会拦截请求导致返回不了数据。

  login({
    commit },userInfo ) {
   
    return new Promise((resolve, reject) => {
   
      login({
   username:userInfo.username,pwd:userInfo.password}).then(response =>{
   
        const data = response
        commit('SET_TOKEN', data.data)
        setToken(data.data)
        resolve()
      })
    })
  }

解决数据返回不到前台的问题 定位到src/utils/request.js

这块代码很长我返回的正确的返回码是200 ，就用200判断，不是200返回错误信息，是的话把数据返回

service.interceptors.response.use(
 
  /**
   * 通过自定义代码确定请求状态
   * 您也可以通过HTTP状态代码来判断状态
   */
response => {
   
    const res = response.data
    // if the custom code is not 200, it is judged as an error.
    if (res.code