wz框架登录功能详解——demo1

这篇文章不是为了介绍怎么使用，而是分析已存在的登录流程，以及之后再正式开发时要做的相应调整。

wz框架（先帮技术大大宣传一下）

介绍：wz框架介绍原文

线上体验：线上体验

github：vue-framework-wz

年初做集团内部项目的时候开始正式应用vue，在简单看过代码之后觉得方便开发，便修修改改。因为技术大大本身是用mock模拟的，所以在项目开发的时候，还要对登录这部份进行调整。再看过代码之后，整理出登录所设计的代码流程。对于大牛来说没必要看，但对于小白开发来说，还是要了解一下，尤其是对于我这种浑身发黑，技术发白的小白，更有必要。

开始！这就是科技感爆棚的登录页 ↓↓↓

1=>src/login/index.vue

handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
                            this.$Message.success('登录成功');

                            this.loading = false;
                            this.$router.push({path: '/'});
                        }).catch(err => {
                            this.$message.error(err);
                            this.loading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

2=>src/store/modules/user.js

// 邮箱登录
        LoginByEmail({commit}, userInfo) {
            const email = userInfo.email.trim();
            return new Promise((resolve, reject) => {
                loginByEmail(email, userInfo.password).then(response => {       //将账户信息返回前端
                    const data = response.data;

                    console.log(response.data.token,"存的token");
                    Cookies.set('Admin-Token', response.data.token);        //将账户信息存入cookie
                    commit('SET_TOKEN', data.token);
                    commit('SET_EMAIL', email);
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

3=>src/api/login.js

import fetch from 'utils/fetch';

export function loginByEmail(email, password) {
    const data = {      //邮箱及密码信息
        email,
        password
    };
    return fetch({
        url: '/login/loginbyemail',     //服务器地址
        method: 'post',
        data
    });
}

4=>src/mock/index.js（mock模拟数据所以进入mock文件）

import Mock from 'mockjs';
import loginAPI from './login';

// 登录相关
Mock.mock(/\/login\/loginbyemail/, 'post', loginAPI.loginByEmail);
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout);
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo);

export default Mock;

5=>src/mock/login.js

import {param2Obj} from 'utils';

const userMap = {
    admin: {
        role: ['admin'],
        token: 'admin',
        introduction: '我是超级管理员',
        name: 'Super Admin',
        uid: '001'
    },
    editor: {
        role: ['editor'],
        token: 'editor',
        introduction: '我是编辑',
        name: 'Normal Editor',
        uid: '002'
    },
    developer: {
        role: ['develop'],
        token: 'develop',
        introduction: '我是开发',
        name: '工程师小王',
        uid: '003'
    }
}

export default {
    loginByEmail: config => {
        const {email} = JSON.parse(config.body);
        console.log(JSON.parse(config.body),"登陆信息");
        return userMap[email.split('@')[0]];
    },
    getInfo: config => {
        const {token} = param2Obj(config.url);
        if (userMap[token]) {
            return userMap[token];
        } else {
            return Promise.reject('a');
        }
    },
    logout: () => 'success'
};

返回的是该数据

admin: {
        role: ['admin'],
        token: 'admin',
        introduction: '我是超级管理员',
        name: 'Super Admin',
        uid: '001'
    },

6=>src/store/modules/user.js

 LoginByEmail({commit}, userInfo) {
            const email = userInfo.email.trim();
            return new Promise((resolve, reject) => {
                loginByEmail(email, userInfo.password).then(response => {       //将账户信息返回前端
                    const data = response.data;

                    console.log(response.data.token,"存的token");
                    Cookies.set('Admin-Token', response.data.token);        //将账户信息存入cookie
                    commit('SET_TOKEN', data.token);
                    commit('SET_EMAIL', email);
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

存入token，登录完成

7=>src/login.js（用来做跳转权限判断）

import router from './router'
import store from './store'
import vue from 'vue'
import NProgress from 'nprogress'   //Progress 进度条
import 'nprogress/nprogress.css'    //Progress 进度条样式

// permissiom judge
function hasPermission(roles, permissionRoles) {
    if (roles.indexOf('admin') >= 0) return true;    //admin权限 直接通过
    if (!permissionRoles) return true;
    return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

//next()和next('xxx')是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！
const whiteList = ['/login', '/authredirect'];        //不重定向白名单
router.beforeEach((to, from, next) => {     //to即将要进入的目标，from当前导航正要离开的目标
    NProgress.start();              //开启Progress
    console.warn(store.getters.token,"存在token，可以继续路由");
    if (store.getters.token) {      //判断是否有token
        if (to.path === '/login') {
            next({path: '/'});
        } else {
            if (store.getters.roles.length === 0) {         //判断当前用户是否已拉取完user_info信息
                store.dispatch('GetInfo').then(res => {     //拉取user_info
                    const roles = res.data.role;

                    store.dispatch('GenerateRoutes', {roles}).then(() => {  //生成可访问的路由表
                        console.log(store.getters.addRouters,"什么可访问");
                        router.addRoutes(store.getters.addRouters);         //动态添加可访问路由表
                        next({...to})       //hack方法 确保addRoutes已完成
                    })
                }).catch(() => {
                    store.dispatch('FedLogOut').then(() => {
                        next({path: '/login'})
                    })
                })
            } else {
                store.dispatch('getNowRoutes', to);

                if (hasPermission(store.getters.roles, to.meta.role)) {
                    next();
                    // console.log("has userinfo")
                } else {
                    next({path: '/', query: {noGoBack: true}})
                }
            }
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {    //在免登录白名单，直接进入
            next()
        } else {
            next('/login');                         //否则不存在token全部重定向到登录页
            // NProgress.done()                        //在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
        }
    }
});

router.afterEach(() => {
    NProgress.done()                                //结束Progress
});

今天这样把，明天整理退出