Abp Vnext3 vue-admin-template(一用戶登錄)

Git地址https://github.com/PanJiaChen/vue-admin-template/blob/master/README-zh.md

官方文檔https://panjiachen.github.io/vue-element-admin-site/zh/guide/

官方注明：本項目的定位是后台集成方案，不太適合當基礎模板來進行二次開發。所以我選擇的是基礎版

需要修改配置文件.env.development把VUE_APP_BASE_API = '/dev-api'修改為VUE_APP_BASE_API = '' 

修改Axios訪問基址改成本地Abp API訪問地址baseURL或者修改.env.development中的配置選項VUE_APP_BASE_API = 'https://localhost:44365/' 

根據手摸手，帶你用vue擼后台 系列二(登錄權限篇)介紹,只是為了拿到Token,所以我只取得Token保存到cookie中,不知有沒有其他需要設置的地方,如果您發現了,請也跟我說下,謝謝

views\login\index.vue是登錄入口，這里只摘主要代碼貼上來講述登錄過程,不需要任何修改

登錄對象定義，為了測試方便直接寫上了用戶名及密碼

loginForm: {
  username: 'admin',
  password: '1q2w3E*'
}

登錄方法

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 || '/'
                }) this.loading = false
            }).
            catch(() = >{
                this.loading = false
            })
        } else {
            console.log('error submit!!') return false
        }
    })
}

先測試一下訪問基址對不對

發現基址對了，也把api去掉了，但中間多了/vue-admin-template，去下圖mock目錄中的user.js修改為真實存在的接口

訪問地址對了,開始進入登陸方法,把下圖路徑的原來登陸方法修改下邊的登錄方法,之前登錄方法用的Json傳輸,我們需要用qs序列化一下,並添加了一些abp獲取token需要的字段,也可把需要變動的加入配置文件,所以因為懶沒配置

login({ commit }, userInfo) {
    var qs = require('qs')
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login(qs.stringify({
        grant_type: 'password',
        scope: 'Mall',
        username: username.trim(),
        password: password,
        client_id: 'Mall_App',
        client_secret: '1q2w3e*'
      })).then(response => {
        const { data } = response
        commit('SET_TOKEN', 'Bearer ' + data.access_token)
        setToken('Bearer ' + data.access_token)
        resolve()
      }).catch(error => {
        console.log(error)
        reject(error)
      })
    })
  },

請將get user info、user logout、remove token三個方法暫時注釋一下，還沒修改到不然一堆報錯，修改到后再取消注釋

進入下圖路徑，修改我們請求訪問方法，

將service.interceptors.response.use方法中的內容全部刪除，我們目前只需要判斷狀態碼200就作為正確獲得token並返回調用

service.interceptors.response.use(
  response => {
    const res = response
    if (res.status === 200) {
      return res
    }

    return Promise.reject(new Error(res.message || 'Error'))
  }

 發現token名不對，不是我們需要的，把下圖常亮修改為我們需要的access_token

登錄測試正常，並成功保存token及跳轉后台主頁

接下來還有很多事要做，上邊注釋掉的三個方法需要實現（獲取用戶信息，退出登錄，清除token），但還需要用戶管理，用戶組，權限管理等

網上也沒找到相關文章，自己Vue基礎也不好，簡直一波三折才搞明白怎么登陸，如果寫的不對的，請指正，謝謝