新手入门vue-element-admin框架（三）：实例：支持后台的登录功能改造

最新推荐文章于 2024-10-09 15:53:01 发布

StellaXiao98

最新推荐文章于 2024-10-09 15:53:01 发布

阅读量2.8k

点赞数 2

分类专栏： vue-element-admin框架学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/StellaXiao98/article/details/116792887

版权

本文详细介绍了如何在vue-element-admin框架中实现登录功能并接入后台。内容包括登录流程分析，如src/main.js、App.vue、store/modules/user.js中的关键代码，以及如何修改路由、数据格式与命名以匹配后台接口。此外，还探讨了基于vue-admin-template的登录页面改造方法，涉及env.development、env.production配置、api/user.js和store/modules/user.js的调整。最后，提到了登录成功后的动态路由改造。

摘要由CSDN通过智能技术生成

前言：

（一）环境配置：https://blog.csdn.net/StellaXiao98/article/details/116790478?spm=1001.2014.3001.5502

（二）vue-element-admin简介及安装：https://blog.csdn.net/StellaXiao98/article/details/116791368?spm=1001.2014.3001.5502

第三部分实例：实现登录页面

本文将介绍vue-element-admin框架中登录功能的流程和如何将登录功能接入后台，最后还介绍了对vue-admin-template的改造方式。

案例描述：前后端分离的开发，后端提供固定的接口，前端依据自己需求，对现有框架进行修改，并接入后台。

（一）vue-element-admin 框架中的登录流程

src/main.js：入口js文件，注册全局组件（Vue、Cookie、Element、store、router等），渲染App组件到页面。
App.vue：定义全局<router-view />，显示路由组件，缺省：/
/src/views/login/index.vue中找到login按键，找到其对应点击事件“handleLogin()”。

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              console.info('login success, redirect: ', this.redirect || '/')
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

该方法中的dispatch操作，调用了src/store/modules/user中的login方法，传递userInfo，见下。

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(