ABP项目IDS4身份认证

ABP项目IDS4身份认证

准备工作：

项目搭建：https://www.cnblogs.com/1285026182YUAN/p/15101794.html 

vue 项目 与 abp 后端

 

登录认证：

 打开vue-element-admin 项目 

1. 找到登录方法 ：src / view / login.vue 的 handleLogin 方法 ，方法名改为 uuLogin ,

loginForm 参数定义为

      loginForm: {
        username: "admin",
        password: "1q2w3E*",
        client_id: "ABPProject_App",
        client_secret: "1q2w3e*",
        grant_type: "password",
      },

  

  handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/uuLogin", 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;
        }
      });
    },

 2. 修改vuex 中的登录方法 

路径 src / store / modules / user.js 里面的 actions 中 增加 uuLogin 方法 

  uuLogin({
    commit
  }, data) {
    return new Promise((resolve, reject) => {
      userLogin(data)
        .then(response => {
          debugger;
          commit('SET_TOKEN', response.access_token)
          setToken(response.access_token)
          resolve()
        }).catch((error) => {
          reject(error)
        })
    })
  },

3. 增加 api 接口调用

路径  src / api / user.js 中 增加 uuLogin 方法 

var qs = require('qs')


export function uuLogin(data) {
  return request({
    baseURL: 'https://localhost:44325/connect/token',
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
  })
}

安装qs插件

cnpm install qs

4. 在ABP后端配置 跨域 访问限制，项目：ABPProject.HttpApi.Host ， 文件：appsettings.json

  "App": {
    "SelfUrl": "https://localhost:44325",
    "ClientUrl": "http://localhost:4200",
    "CorsOrigins": "https://*.ABPProject.com,http://localhost:4200,http://localhost:9527",
    "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
  },
  "ConnectionStrings": {
    "Default": "Server=localhost;Port=3306;Database=ABPProject;Uid=root;Pwd=123456;"
  },
  "AuthServer": {
    "Authority": "https://localhost:44325",
    "RequireHttpsMetadata": "false",
    "SwaggerClientId": "ABPProject_Swagger",
    "SwaggerClientSecret": "1q2w3e*"
  },
  "StringEncryption": {
    "DefaultPassPhrase": "cz8P67SpaeeA5FUK"
  }
}

5.  修改 request.js 接口 

路径 src / utils / request.js 

修改数据返回接口，增加状态判断。

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

修改数据访问接口，增加 token 请求头

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // config.headers['X-Token'] = getToken()
      config.headers['Authorization'] =  'Bearer ' +getToken()
    }
    return config
  },
  error => { 
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

  此时可登录成功，并记录 access_token 

6. 登录成功后，在permission.js文件中 会验证用户信息

 增加 获取用户信息的 接口

路径 src / api / user.js 

export function uuInfo() {
  return request({
    baseURL: 'https://localhost:44325/connect/userinfo',
    method: 'get'
  })
}

 7. 修改 vuex 中的 获取用户信息方法  getInfo

  getInfo({
    commit,
    state
  }) {
    return new Promise((resolve, reject) => {

      uuInfo()
        .then(response => {

          let data = {
            roles: [response.role],
            name: response.name,
            avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            introduction: 'I am a super administrator'
          }

          commit('SET_NAME', data.name)
          commit('SET_ROLES', data.roles)
          commit('SET_AVATAR', data.avatar)
          commit('SET_INTRODUCTION', data.introduction)

          resolve(data)
        }).catch(error => {
          reject(error)
        })
    })
  },

登录成功。

引用：https://www.cnblogs.com/xhznl/p/13508356.html

引用：https://www.cnblogs.com/william-xu/p/11274431.html

项目地址：https://gitee.com/wuxincaicai/abp