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基础也不好，简直一波三折才搞明白怎么登陆，如果写的不对的，请指正，谢谢

巴特西

Abp Vnext3 vue-admin-template(一用户登录)

最新文章

热门文章