Vue 2.0 起步(4)第二版 輕量級后端Flask用戶認證 - 微信公眾號RSS

上一篇：Vue 2.0 起步(4) 輕量級后端Flask用戶認證 - 微信公眾號RSS
上一篇采用了Flask-JWT token驗證。由于網站新的需要，除了token，現在要加上session管理，跟Flask-Security比較之后，決定創建第4篇的第二版：Flask-Security同時管理token和session
如果你是克隆git里源碼的，注意工程目錄名是vue-tutorial/，步驟：http://www.lxweimin.com/p/b3c76962e3d4

2019延伸閱讀推薦：帶你進入異步Django+Vue的世界 - Didi打車實戰(1)

技術準備

Flask-Security 如何Session CSRF和REST Token兼得

注意：python版本！源碼只能用Python2，用Python3就會報錯：AttributeError: 'NoneType' object has no attribute 'get_user'。具體原因已查到，是因為Flask_security初始化時，python3處理方式不同。源碼已更新。

步驟：

  1. 后端Flask app更新
  2. 前端vue.js ajax更新

1. 后端Flask app更新

app初始化時，引入Flask-Security，綁定數據庫里的User/Role

/app/_init_.py (隱藏了無關代碼)

from flask_security import Security, SQLAlchemyUserDatastore, current_user, \
    UserMixin, RoleMixin, login_required, auth_token_required, http_auth_required
from flask_security.utils import encrypt_password

db = SQLAlchemy()

# models引用必須在 db/login_manager之后，不然會循環引用
from .models import User, Role

user_datastore = SQLAlchemyUserDatastore(db, User, Role)
security = Security()

def create_app(config_name):
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    config[config_name].init_app(app)

    db.init_app(app)
    security.init_app(app, datastore=user_datastore)

    return app

Flask-Security相關配置

/config.py (部分)

class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or 'hard to guess xxxx'
    # 允許追蹤 login activities
    SECURITY_TRACKABLE = True
    # 密碼加密存儲
    SECURITY_PASSWORD_HASH = 'pbkdf2_sha512'
    SECURITY_PASSWORD_SALT = 'super-xxxx'
    # 允許注冊 register，暫不需要郵件確認
    SECURITY_REGISTERABLE = True
    SECURITY_SEND_REGISTER_EMAIL = False

針對SECURITY_TRACKABLE，我們的Model也需要增加字段

/app/models.py

roles_users表：多對多關系的聯結表，一個User有多個Role，一個Role有多個User

roles_users = db.Table('roles_users',
        db.Column('user_id', db.Integer(), db.ForeignKey('users.id')),
        db.Column('role_id', db.Integer(), db.ForeignKey('roles.id')))

Role表：保存各個角色，如superuser, admin, author, editor, user

class Role(db.Model, RoleMixin):
    __tablename__ = 'roles' 
    id = db.Column(db.Integer(), primary_key=True)
    name = db.Column(db.String(80), unique=True)
    description = db.Column(db.String(255))

User表：添加last_login_at, current_login_at, last_login_ip, current_login_ip, login_count字段，Flask-Security會自動追蹤用戶登錄

class User(UserMixin, db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(255), unique=True)
    username = db.Column(db.String(64), unique=True, index=True)
    password = db.Column(db.String(255))
    active = db.Column(db.Boolean())
    confirmed_at = db.Column(db.DateTime())
    last_login_at = db.Column(db.DateTime())
    current_login_at = db.Column(db.DateTime())
    last_login_ip = db.Column(db.String(63))
    current_login_ip = db.Column(db.String(63))
    login_count = db.Column(db.Integer)
    roles = db.relationship('Role', secondary=roles_users,
                            backref=db.backref('users'))#, lazy='dynamic'))
    member_since = db.Column(db.DateTime(), default=datetime.utcnow)
    mps = db.relationship('Subscription',
                               foreign_keys=[Subscription.subscriber_id],
                               backref=db.backref('subscriber', lazy='joined'),
                               lazy='dynamic',
                               cascade='all, delete-orphan')

注意：數據模型變動之后，需要用Flask-migration更新一下數據庫。
可以在管理命令行加入這些常用命令：

/manage.py
執行python manage.py deploy --> 初始化/升級數據模型
執行python manage.py dropall --> 刪除數據庫里所有表
執行python manage.py initrole --> 創建Roles和admin用戶，賦于superuser角色

@manager.command
def deploy():
    """Run deployment tasks."""
    from flask_migrate import init, migrate, upgrade
    # migrate database to latest revision
    try: init()
    except: pass
    migrate()
    upgrade()

@manager.command
def dropall():
    db.drop_all()
    print "all tables dropped! remember to delete directory: migrations"

@manager.command
def initrole():
    db.session.add(Role(name="superuser"))
    db.session.add(Role(name="admin"))
    db.session.add(Role(name="editor"))
    db.session.add(Role(name="author"))
    db.session.add(Role(name="user"))
    pwd = os.getenv('FLASK_ADMIN_PWD') or raw_input("Pls input Flask admin pwd:")
    db.session.add(User(email="admin", password=encrypt_password(pwd), active=True))
    ins=roles_users.insert().values(user_id="1", role_id="1")
    db.session.execute(ins)
    db.session.commit()
    print "Roles added!"

2. 前端vue.js ajax更新

Flask-Security一些默認地址：
注冊：/register
登錄：/login
注銷：/logout
比如，你手動打開 http://localhost:5000/login， Flask-Security會自動渲染一個登錄頁面，很簡陋，當然你可以自己寫頁面override它。

Flask-Security login

不過前端vue.js是用ajax訪問的，不在乎頁面漂亮與否。
根據Flask-Security 如何Session CSRF和REST Token兼得的步驟，來改寫vue

/src/components/Siderbar.vue

登錄函數login()，注意Flask-Security是用email作為唯一用戶名的，先用正則表達式獲得csrf_token，再獲取json格式的token

methods: {
            login() {
                if (!this.validation) return;
                // get CSRF
                var csrf_token = '';
                this.$http.get('/login').then((response) => {
                    // 響應成功回調
                    var data = response.body;
                    //                 alert(JSON.stringify(response));
                    // <input id="csrf_token" name="csrf_token" type="hidden" value="1483433916##5b057abdef66da070c8385752b78f6c584f6ba41"><input
                    var csrf_token = '';
                    try {
                        csrf_token = data.match(/name="csrf_token" type="hidden" value="(.*?)">/)[1];
                        //                  alert(csrf_token);
                    } catch (exception) {
                        // 如果已經登陸，則302，redirect to home
                        //                  alert(exception);   // exception: TypeError: Cannot read property '1' of null
                        alert('登錄異常，請重新登錄');
                        return window.location = '/logout';
                    }
                    this.$http.post('/login',
                        //body
                        {
                            email: this.username,
                            password: this.password,
                            csrf_token: csrf_token
                        },
                        //options
                        {
                            headers: {
                                'Content-Type': 'application/json; charset=UTF-8'
                            }
                        }).then((response) => {
                        // 響應成功回調
                        var jsondata = response.body;
                        alert(JSON.stringify(jsondata));
                        this.token = jsondata.response.user.authentication_token;
                        this.is_login = true;
                        //               alert('token:\n'+ this.token);
                        var userData = {
                            'username': this.username,
                            'token': this.token
                        };
                        window.localStorage.setItem("user", JSON.stringify(userData));
                        //     this.$nextTick(function () { });
                        //   getSubscription()
                    }, (response) => {
                        // 響應Login-POST錯誤回調
                        alert('登錄出錯了！ ' + response.status + response.statusText)
                    });
                }, (response) => {
                    // 響應login-GET 錯誤回調
                    alert('登錄出錯了(CSRF)！ ' + JSON.stringify(response))
                });
            },
login ajax post.png
login ajax response.png

注冊函數register()，跟login()類似，也需要先獲取csrf_token

            register() {
                if (!this.validation) return;
                // get CSRF
                var csrf_token = '';
                this.$http.get('/register').then((response) => {
                    // 響應成功回調
                    var data = response.body;
                    // <input id="csrf_token" name="csrf_token" type="hidden" value="1483433916##5b057abdef66da070c8385752b78f6c584f6ba41"><input
                    var csrf_token = data.match(/name="csrf_token" type="hidden" value="(.*?)">/)[1]
                    //              alert(csrf_token);                
                    this.$http.post('/register',
                        //body
                        {
                            email: this.username,
                            password: this.password,
                            csrf_token: csrf_token
                        },
                        //options
                        {
                            headers: {
                                'Content-Type': 'application/json; charset=UTF-8'
                            }
                        }).then((response) => {
                        // 響應成功回調
                        var data = response.body;
                        //          alert('Server rsp:\n'+ JSON.stringify(response));
                        //"body":{"meta":{"code":400},"response":{"errors":{"email":["aaa@bbb.com is already associated with an account."]}}},
                        if (data.meta.code !== 200) {
                            return alert(JSON.stringify(data.response.errors))
                        }
                        this.token = data.response.user.authentication_token;
                        this.is_login = true;
                        //            alert(this.token);
                        var userData = {
                            'username': this.username,
                            'token': this.token
                        };
                        window.localStorage.setItem("user", JSON.stringify(userData));
                    }, (response) => {
                        // 響應錯誤回調
                        alert('注冊出錯了！ ' + JSON.stringify(response))
                    });
                }, (response) => {
                    // 響應register-GET 錯誤回調
                    alert('注冊出錯了(CSRF)！ ' + JSON.stringify(response))
                });
            },

如果返回代碼不是200，則說明注冊出錯，比如用戶名已被占用，進一步，可由vue來產生中文友好的提示信息：

email occupied.png

注銷函數logout()：GET /logout就行

            logout() {
                this.$http.get('/logout').then((response) => {
                    // 響應成功回調
                    this.is_login = false;
                    this.password = '';
                    this.token = '';
                    window.localStorage.removeItem("user")
                }, (response) => {
                    // 響應錯誤回調
                    alert('Logout出錯了！ ' + JSON.stringify(response))
                });
            },

好了，更新不算麻煩，以后就一勞永逸了，session、token管理、email驗證、密碼找回等等功能都有了。

Demo：http://vue2.heroku.com
源碼：https://github.com/kevinqqnj/vue-tutorial
請使用新的template: https://github.com/kevinqqnj/flask-template-advanced

下一篇：
Vue 2.0 起步(5) 訂閱列表上傳和下載 - 微信公眾號RSS

http://www.lxweimin.com/p/ab778fde3b99

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容