[Abp vNext微服務實踐] - vue-element-admin登錄一

簡介

之前的技術路線本來是angular的，后來經過一段時間的開發還是打算選擇vue，原因是vue簡單豐富，盡管angular規范強大，但是組件庫都不太符合國人風格。看到GitHub上Vue Element Admin這么高的人氣后就毫不猶豫的選擇了這個后台管理框架。作為一個后端開發，剛剛下載Vue Element Admin框架時確實無從下手，但是一番研究之后也就適應了，今天就介紹下改造Vue Element Admin登錄並對接vNext授權服務。vNext授權服務使用的是ids4框架，所以使用ids4框架授權的服務都可以參考該登錄。

代碼分析

根據Vue Element Admin作者的介紹，該框架登錄需要兩步，獲取token和獲取userinfo（用戶信息）。Vue Element Admin作者公司的后端設計應該是用戶信息中包括用戶權限，所以Vue Element Admin（后稱Admin）登錄只需調兩次接口。

在view路徑的login中可以看到login的click事件：

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch("user/userLogin",this.loginForm).then(()=>{
            this.$router.push({path:'/'});
            this.loading = false
          }).catch(err=>{
            this.$message.error(err)
            this.loading = false
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

為了區別，我的登錄方法名是userLogin,在loginForm中對client進行了包裝：

      loginForm: {
        username: 'admin',
        password: '123qwe',
        client_id: config.client.client_id,
        client_secret: config.client.client_secret,
        grant_type: config.client.grant_type
      },

下一步開始獲取token，在store目錄中找到user.js並增加userLogin方法：

  userLogin({ commit }, data) { 
    return new Promise((resolve, reject) => {
      axiosMethods.instancePosts('/connect/token', data)
        .then(response => {
          commit('SET_TOKEN', response.access_token)
          setToken(response.access_token)
          resolve()
        }).catch((error) => {
          reject(error)
        })
    })
  },

Admin獲取token代碼：

  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)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

可以看出兩處獲取token差別不大，Admin中login方法沒有接口請求，而userLogin進行了post請求，post請求如下：

  instancePosts(url, params) { 
    var instance = axios.create({
      baseURL: config.base.ip + ':' + config.base.authServerPort
    })
    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'return new Promise((resolve, reject) => {
      instance.post(url, data)
        .then(response => {
          resolve(response.data)
        }, err => {
          reject(err)
        })
        .catch((error) => {
          reject(error)
        })
    })
  },

注意：ids4中token接口參數必須是x-www-form-urlencoded，使用postman模擬如下：

 

上述方法可以順利拿到token，並保存至cookie。

Admin在拿到token后還無法登錄，因為Admin做了全局的權限驗證，沒有用戶信息和權限信息是無法登錄的，下一步開始獲取用戶信息。

ids4框架中獲取userinfo非常容易，直接用token請求userinfo接口就可以拿到用戶信息，還可以配置userinfo的信息，我配置的是sub、role、name

接下來開始獲取userinfo：

Admin中已經提供了getInfo方法，只需做些修改就好了，修改后的代碼如下：

  getInfo({
    commit,
    state
  }) {
    return new Promise((resolve, reject) => {
      axiosMethods.getUserInfo('/connect/userinfo')
        .then(response => {
          commit('SET_NAME', response.name)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
    })
  },

在axios封裝中添加getUserInfo方法：

  getUserInfo(url) { // 獲取用戶信息
    var instance = axios.create({
      baseURL: config.base.ip + ':' + config.base.authServerPort
    })
    instance.defaults.headers.Authorization = 'Bearer ' + getToken()
    return new Promise((resolve, reject) => {
      instance.get(url)
        .then(response => {
          resolve(response.data)
        }, err => {
          reject(err)
        })
        .catch((error) => {
          reject(error)
        })
    })
  },

到這一步已經完成了Admin中原始的登錄過程，由於vNext的設計中userinfo並沒有包括權限信息，這里getInfo返回的數據只是name和role，如果role中有admin角色則Admin是可以登錄的，不過這種登錄有很大的缺陷。下一篇中我會單獨介紹權限獲取和Admin根據權限登錄。

總結

如果是純前端開發，只需理解Admin框架中roles代表的就是權限，而如果有過后端開發經驗或者是全端工程師則需要區分。role在后台代表的是角色---權限的集合，而Admin框架中role代表的就是權限，我剛開始就是被搞混了，導致差點放棄Admin。這也是為什么上面的登錄有權缺陷的原因，因為上面的登錄權限是根據userinfo中的角色名判斷的，這種判決是固定無法動態分配。

vNext參考篇：https://www.cnblogs.com/william-xu/p/11245738.html

文章目錄：https://www.cnblogs.com/william-xu/p/12047529.html