Abp Vnext vue-admin-template (one user login)

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

official documentation https://panjiachen.github.io/vue-element-admin-site/zh/guide/

Official note: The positioning of this project is a background integration solution, which is not suitable for secondary development as a basic template. So I chose the basic version

Need to modify the configuration file .env.development to change VUE_APP_BASE_API = '/dev-api' to VUE_APP_BASE_API = ''

Modify the Axios access base address and change it to the local Abp API access address baseURL: process.env.VUE_APP_BASE_API did not find where to modify it, so it was directly modified.

according to Hand in hand, take you to the background with vue series 2 (login permission) Introduction, just to get the Token, so I only get the Token and save it in the cookie. I don't know if there is anything else that needs to be set. If you find it, please tell me too, thank you

views\login\index.vue is the login entry, here only the main code is extracted and pasted to describe the login process, no modification is required

The login object definition, the user name and password are directly written for the convenience of testing

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

login method

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
        }
    })
}

First test whether the access base address is correct

It was found that the base address was correct, and the api was also removed, but there was a /vue-admin-template in the middle. Go to the user.js in the mock directory in the figure below and modify it to a real interface.

The access address is correct, start to enter the login method, modify the original login method of the path in the figure below to the login method below, the Json transmission used by the previous login method, we need to serialize it with qs, and add some fields required by abp to obtain the 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)
      })
    })
  },

Please comment the three methods of get user info, user logout, and remove token temporarily. If they have not been modified, a bunch of errors will be reported. Uncomment after modification.

Enter the path in the figure below, modify our request access method,

Delete all the content in the service.interceptors.response.use method, we only need to judge the status code 200 as the correct token and return the call

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

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

It is found that the token name is wrong, it is not what we need, and the following picture is changed to the access_token we need.

The login test is normal, and the token is successfully saved and the background home page is redirected

There are still a lot of things to do next. The three methods commented out above need to be implemented (obtain user information, log out, clear token), but also need user management, user group, permission management, etc.

I haven't found any relevant articles on the Internet, and my Vue foundation is not good. It took a lot of twists and turns to figure out how to log in. If it's wrong, please correct me, thank you

Tags: abp

Posted by gl_itch on Tue, 31 May 2022 02:56:35 +0530