循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

在用户登录界面中，我们处理用户登录逻辑代码如下所示。

复制代码
// 处理登录事件
handleLogin() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … 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
}
})
}
复制代码
这里主要就是调用Store模块里面的用户Action处理操作。

例如对于用户store模块里面的登录Action函数如下所示。

复制代码
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { result } = response // 获取返回对象的 result
var token = result.accessToken
var userId = result.userId

    // 记录令牌和用户Id
    commit('SET_TOKEN', token)
    commit('SET_USERID', userId)

    // 存储cookie
    setToken(token)
    setUserId(userId)
    resolve()
  }).catch(error => {
    reject(error)
  })
})

},
复制代码
而其中 login({ username: username.trim(), password: password }) 操作，是通过API封装处理的调用，使用前在Store模块中先引入API模块，如下所示。

import { login, logout, getInfo } from ‘@/api/user’
而其中 API模块代码如下所示。

复制代码
export function login(data) {
return request({
url: ‘/abp/TokenAuth/Authenticate’,
method: ‘post’,
data: {
UsernameOrEmailAddress: data.username,
password: data.password
}
})
}
复制代码
这里我们用了一个/abp的前缀，用来给WebProxy的处理，实现地址的转义，从而可以实现跨站的处理，让前端调用外部地址就和调用本地地址一样，无缝对接。

我们来看看vue.config.js里面对于这个代理的转义操作代码。

龙华大道1号http://www.kinghill.cn/LongHuaDaDao1Hao/index.html