wz框架登录功能详解—

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

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);        //将账户信息存入cookiecommit('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);        //将账户信息存入cookiecommit('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();              //开启Progressconsole.warn(store.getters.token,"存在token，可以继续路由");if (store.getters.token) {      //判断是否有tokenif (to.path === '/login') {next({path: '/'});} else {if (store.getters.roles.length === 0) {         //判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(res => {     //拉取user_infoconst 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
});

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

wz框架登录功能详解——demo1相关推荐

php redis 用户注册,redis+php实现微博（一）注册与登录功能详解
本文实例讲述了redis+php实现微博注册与登录功能.分享给大家供大家参考,具体如下: (一).微博功能概况微博用户账号注册微博用户登录微博发布添加微博好友(粉丝) 微博推送微博冷数据写入 ...
微博登录界面的PHP代码,redis+php实现微博（一）注册与登录功能详解
本文实例讲述了redis+php实现微博注册与登录功能.分享给大家供大家参考,具体如下: (一).微博功能概况微博用户账号注册微博用户登录微博发布添加微博好友(粉丝) 微博推送微博冷数据写入 ...
IOS视频编辑功能详解下篇-视频裁剪、视频拼接、音视频的处理
转自:http://www.hudongdong.com/ios/550.html 前言用代码在简单视频编辑中,主要就是加美颜.水印(贴图).视频截取.视频拼接.音视频的处理,在美颜中,使用GPUI ...
多维系统下单点登录深入详解
多维系统下单点登录深入详解 1. 从淘宝天猫的单点登录说起 1.1 SSO单点登录 1.2 淘宝天猫登录场景解析 2. 单点登录之整体解决方案 2.1 设计方案-Cookie 2.2 设计方案-分布式 ...
pythonmessage用法_django 消息框架 message使用详解
前言在网页应用中,我们经常需要在处理完表单或其它类型的用户输入后,显示一个通知信息给用户. 对于这个需求,Django提供了基于Cookie或者会话的消息框架messages,无论是匿名用户还是认证 ...
python编程用户登陆c_django实现用户登陆功能详解
简介: Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python ...
定时任务框架APScheduler学习详解
定时任务框架APScheduler学习详解 APScheduler简介在平常的工作中几乎有一半的功能模块都需要定时任务来推动,例如项目中有一个定时统计程序,定时爬出网站的URL程序,定时检测钓鱼网站 ...
java 8 新功能详解_Java 8的8个新功能
java 8 新功能详解注意:确保还检查了我们的详细教程Java 8 Features – ULTIMATE Guide . Jdk 1.8(又名Java 8)今天发布,这意味着它的通用发布版本已经 ...
iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例
使用SWRevealViewController实现侧边菜单功能详解下面通过两种方法详解SWRevealViewController实现侧边菜单功能: 1.使用StoryBoard实现 2.纯代码实 ...
PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解
PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解 uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了 ...

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

wz框架登录功能详解——demo1相关推荐

最新文章

热门文章