iview-admin登录模块改造

iview-admin自带登录模块但有以下改造点

自带连接的数据是测试数据mock ，现改造成连接真实后台数据库
自带未对登录的数据库和密码做验证，其无提示信息

iview-admin 登录模块流程分析

启动应用进入根路径：http://localhost:8080/
因iview-admin 有权限控制判断是否有登录后的token ,无则跳转到登录页面
权限控制src/router/index.js

image.png
路由控制src/router/router.js

export default [{
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登录',
    hideInMenu: true
  },
  component: () => import('@/view/login/login.vue')
},

找到登录页面组件@/view/login/login.vue
子组件：@/view/components/login-form/login-form.vue
流程：
界面输入用户信息(@/view/components/login-form/login-form.vue)
->调用父组件的handleSubmit方法(@/view/login/login.vue)
->再调用Vuex actions 方法handleLogin(@/store/user.js)
->再调用axios方法login(@/api/user.js)
->请求后接口数据

改造与后台接口连接

vue.config.js

devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: {
      colors: true
    },
    proxy: {
      // 匹配代理的url
      '/api': {
        // 目标服务器地址
        target: 'localhost:5000',
        // 路径重写
        pathRewrite: {
          '^/api': '/api'
        },
        changeOrigin: true
      }
    }
  }

config/index.js

baseUrl: {
    // dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
    // pro: 'https://produce.com'
    dev: '',
    pro: ''
  }

<style lang="less">
@import "./login.less";
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in"
            title="欢迎登录"
            :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <p class="login-tip">
            <Alert type="error"
                   v-show="flag"
                   show-icon>
              {{message}}
            </Alert>
          </p>

        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'
import { getmd5 } from '@/libs/util'
export default {
  components: {
    LoginForm
  },
  data () {
    return {
      flag: false,
      message: ''
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit ({ userName, password }) {
      password = getmd5(password)
      this.handleLogin({ userName, password }).then(res => {
        const data = res
        this.message = data.message// 获取后始返回消息显示
        if (data.check_login) { // 判断是否登录成功
          this.getUserInfo().then(res => {
            this.$router.push({
              name: this.$config.homeName
            })
          })
        } else {
          this.flag = true // 失败显示返回的消息
        }
      })
    }
  }
}
</script>

<style>
</style>

后台flask

新建user的model models.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
#Author:likang
from app import db #db是在app/__init__.py生成的关联后的SQLAlchemy实例
import sqlalchemy
Base = sqlalchemy.ext.declarative.declarative_base()
class User(db.Model):
    __tablename__ = 'users'

    user_id = db.Column(db.Integer, primary_key=True,autoincrement=True)
    name = db.Column(db.String(80), unique=True)
    access = db.Column(db.String(320), unique=True)
    password = db.Column(db.String(32), nullable=False)
    token = db.Column(db.String(32), nullable=False)
    avatar = db.Column(db.String(32), nullable=False)

    # def __init__(self, user_id, name, access,token,password,avatar):
    #     self.user_id = user_id
    #     self.name = name
    #     self.access = access
    #     self.token= token
    #     self.ppassword=password
    #     self.avatar=avatar
    def __repr__(self):
        return '<User %r>' % self.name

    def to_dict(self):
        return {c.name: getattr(self, c.name, None) for c in self.__table__.columns}

    Base.to_dict = to_dict

登录判断 login.py

from flask import  request, redirect, url_for, render_template,Blueprint,jsonify
# from app.utils.comm import geMD5,AlchemyEncoder
# import json
from app.models import User
app_login = Blueprint('app_login', __name__)
@app_login.route('/', methods=['GET', 'POST'])
def login_check():
    message = 'login failure'
    check_login = False
    user=[]
    token=''
    if request.args:
        uname=request.args.get("userName")
        password = request.args.get("password")
        print("param_password:",password,'param_uname:',uname)
        users=User.query.filter_by(name=uname).first()
        if(users):
            if(password==users.password):
                message = 'login success'
                check_login = True
                token=users.token
            else:
                message = '密码不存在'
        else:
            message='用户名不存在'
    re_map = {
        'user_id': users.user_id,
        'username':users.name,
        'access':users.access,
        'token':users.token,
        'message':message,
        'check_login':check_login
    }
    return re_map

测试登录

密码错误

image.png
登录成功

image.png

登录功能(iview-admin login)