vue-element-admin登陸abp vNext受權服務(ids4)

簡介

以前的技術路線原本是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（後稱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參考篇：http://www.javashuo.com/article/p-hkoadhic-cm.html