Vue + 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‘这里我们修改的是生产环境的地址。改好后，编译并部署到后端，然后启动后端服务即可进行测试了。以下就是登录页面（重写后的登录页）和首页。
