wz框架登录功能详解——demo1
这篇文章不是为了介绍怎么使用,而是分析已存在的登录流程,以及之后再正式开发时要做的相应调整。wz框架(先帮技术大大宣传一下)介绍:wz框架介绍原文线上体验:线上体验github:vue-framework-wz年初做集团内部项目的时候开始正式应用vue,在简单看过代码之后觉得方便开发,便修修改改。因为技术大大本身是用mock模拟的,所以在项目开发的时候,还要
·
这篇文章不是为了介绍怎么使用,而是分析已存在的登录流程,以及之后再正式开发时要做的相应调整。
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
});
今天这样把,明天整理退出
更多推荐
已为社区贡献2条内容
所有评论(0)