专栏首页TalkPythonVue + Flask 实战开发系列(七)

Vue + Flask 实战开发系列(七)

vue-admin-template这套脚手架程序,是整合了Vue全家桶相关技术。对于Vue零基础的读者,如果在此基础上来做开发,可能会有一定的难度。因此,你至少需要了解学习一下axios,vuex,vue-router等相关的内容。

上一次分享的内容,我们可以看到应用的登录页面了。但还不能登录,这一次就来开发登录功能。登录接口早已经开发完成了。现在你可以打开vue-admin-template目录,熟悉一下这个工程的目录结构。因为,我们接下来的开发,都是在这里完成。[https://panjiachen.github.io/vue-element-admin-site/zh/]

配置Flask后端接口地址

在vue-admin-template目录下,找到.env.development文件,然后编辑该文件。把我们后端的接口地址,在这里进行配置,完成后保存即可。

# base api
VUE_APP_BASE_API = 'http://127.0.0.1:5000/api'

前端封装登录接口

现在就来封装我们的登录接口,在vue-admin-template中,所有后端服务接口,都是封装在src/api目录中。你可以发现,在src/api目录下,已经有一个user.js文件,这个文件就是封装登录的接口的地方。现在打开该文件,编写登录接口封装程序。

import request from '@/utils/request'

export function login(data) {
  return request({
    url: "/users/login", //Flask后端登录接口
    method: 'post', //请求方法
    data //请求参数,这里是用户名和密码
  })
}

修改响应拦截器

由于vue-admin-template脚手架程序,默认的接口响应拦截器程序与我们自己的编写的接口响应结果和结构不同。因此,需要做一定的修改。响应拦截器是封装在src/utils/request.js文件中,这个是框架已经封装完成的axios请求程序。有请求拦截器和响应拦截器。打开request.js文件后,找到响应拦截器程序,做以下修改。res.code !== 200000 修改为 res.code !== 'success'

在store中编写调用登录和退出接口方法

调用登录接口的过程是在store的action中完成的,接口请求成功后,我们可以获取到登录接口返回的内容,例如登录用户名,头像地址、token等信息。

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        commit('SET_TOKEN', response.token)
        commit('SET_NAME', response.name)
        commit('SET_AVATAR', response.avatar)
        setToken(response.token)
        resolve()
      }).catch(error => {
        console.log(error)
        reject(error)
      })
    })
  }

退出方法,这里没有调用退出接口,采用的情况token的方式。从前端方式实现的退出系统。

logout({ commit, state }) {
    removeToken() 
    resetRouter()
    commit('RESET_STATE')
  }

在views中编写登录页面和登录方法

登录程序是在src/views/login/index.vue文件中。这里就是我们点击登录按钮调用的登录方法,它并没有直接调用登录接口,而是通过store的dispatch方法间接调用的。

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

退出程序默认是写好的,该程序位于Navbar组件中,具体位置:src/layout/components/Navbar.vue,具体程序是下方这样的:

async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }

完成以上登录和退出程序后,还需要在前端路由做相应的权限控制,只有登录成功的用户,才可以正常的跳转进入系统首页。登录失败则会重定向到登录页。这些工作,都需要在前端来完成。

路由权限控制

我们使用 vue-route 的 beforeEach 实现导航守卫,也就是路由跳转前验证登录是否成功。如果成功继续跳转首页,否则就是重定向到登录页。这部分程序默认已经写好,我们只需稍作修改即可。

if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // 注释掉下面这行即可,这里是调用获取信息接口的,我们暂且略过这部分.
          // await store.dispatch('user/getInfo')

          next()
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }

修改这部分后,再去修改.env.production文件,具体修改如下:

# base api
VUE_APP_BASE_API = '/prod-api' #改为 VUE_APP_BASE_API = '/api‘

这里我们修改的是生产环境的地址。改好后,编译并部署到后端,然后启动后端服务即可进行测试了。以下就是登录页面(重写后的登录页)和首页。

本文分享自微信公众号 - TalkPython(TalkPython),作者:TalkPython

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何去掉列表中重复的元素

    TalkPython
  • Vue + Flask 实战开发系列(五)

    接口开发完成以后,并不代表编程就结束了。因为接口会被很多个客户端所使用,例如:Web端,Android端,iOS端,小程序端等。因此这也就表示接口会被其他开发人...

    TalkPython
  • Vue + Flask 实战开发系列(十)

    欢迎来到我的“Vue + Flask”系列的第十部分。这也是本系列最后一部分。在次内容中,我们将把我们的项目部署在一个生产服务器上。在部署应用之前,需要在服务器...

    TalkPython
  • python接口自动化(二十五)--unittest断言——下(详解)

      本篇还是回归到我们最初始的话题,想必大家都忘记了,没关系看这里:传送门 没错最初的话题就是登录,由于博客园的登录机制改变了,本篇以我找到的开源免费的登录...

    北京-宏哥
  • 如何高效撤销Git管理的文件在各种状态下的更改

      企业中我们一般采用分布式版本管理工具git来进行版本管理,在团队协作的过程中,我们难免会遇到误操作,需要撤销更改的情况,那么我们怎么高效的进行撤销修改呢?...

    阿豪聊干货
  • 第4章 类和接口

    初学Java的时候感觉类和接口都好简单,后续慢慢发现类和接口的设计并非是想象总的那么简单的,还有好多需要学习。

    程序亦非猿
  • Spring Boot 2.x(四):与Mybatis不得不说的几种姿(zhi)势(shi)

    目前的大环境下,使用Mybatis作为持久层框架还是占了绝大多数的,下面我们来说一下使用Mybatis的几种姿势。

    山禾说
  • 服务器配置java

    _淡定_
  • ONOS:从DeviceSubsystem看ONOS子系统设计(1):Core层基本功能架构

    言 ONOS的内核是由诸多遵循同一架构设计的子系统组成的,Device Subsystem设备子系统就是其中重要的一员。笔者将借助其源码讲解ONOSCore层的...

    SDNLAB
  • ThunderBoard与EFR32MG初印象-Silabs厦门workshop笔记

    今天参加了Silabs和世强在厦门的workshop,对Silabs的EFR32MG方案印象深刻,值得一提的是,Silabs原厂的FAE梅汉忠特别有型,顶着一头...

    twowinter

扫码关注云+社区

领取腾讯云代金券