From 472cbb6d65902a91a66e00d2916521b9e78ea6df Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 26 Jun 2017 15:43:11 +0800 Subject: [PATCH] add easy-mock --- config/dev.env.js | 3 +- config/prod.env.js | 3 +- src/api/login.js | 29 +++++------ src/main.js | 72 ++++++++++++--------------- src/router/index.js | 1 + src/store/modules/user.js | 52 +++---------------- src/utils/fetch.js | 49 +++++++++--------- src/views/404.vue | 4 +- src/views/dashboard/default/index.vue | 5 -- src/views/dashboard/index.vue | 22 +------- src/views/login/index.vue | 5 +- 11 files changed, 89 insertions(+), 156 deletions(-) delete mode 100644 src/views/dashboard/default/index.vue diff --git a/config/dev.env.js b/config/dev.env.js index efead7c..5f3a45f 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -2,5 +2,6 @@ var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { - NODE_ENV: '"development"' + NODE_ENV: '"development"', + BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', }) diff --git a/config/prod.env.js b/config/prod.env.js index 773d263..17ff3e5 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,3 +1,4 @@ module.exports = { - NODE_ENV: '"production"' + NODE_ENV: '"production"', + BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', } diff --git a/src/api/login.js b/src/api/login.js index 990498d..1b14881 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -1,21 +1,13 @@ import fetch from '@/utils/fetch'; -export function loginByEmail(email, password) { - const data = { - email, - password - }; +export function login(email, password) { return fetch({ - url: '/login/loginbyemail', + url: '/user/login', method: 'post', - data - }); -} - -export function logout() { - return fetch({ - url: '/login/logout', - method: 'post' + data: { + email, + password + } }); } @@ -27,3 +19,12 @@ export function getInfo(token) { }); } +export function logout() { + return fetch({ + url: '/user/logout', + method: 'post' + }); +} + + + diff --git a/src/main.js b/src/main.js index 15e7ae0..14ed8a6 100644 --- a/src/main.js +++ b/src/main.js @@ -15,47 +15,41 @@ Vue.config.productionTip = false Vue.use(ElementUI); -router.afterEach(() => { - NProgress.done(); // 结束Progress + +const whiteList = ['/login'];// 不重定向白名单 +router.beforeEach((to, from, next) => { + NProgress.start(); // 开启Progress + 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(() => { // 生成可访问的路由表 + router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 + next(to.path); // hack方法 确保addRoutes已完成 + }) + }).catch(err => { + console.log(err); + }); + } else { + next(); + } + } + } else { + if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 + next() + } else { + next('/login'); // 否则全部重定向到登录页 + NProgress.done(); + } + } }); - -// const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单 -// router.beforeEach((to, from, next) => { -// NProgress.start(); // 开启Progress -// 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(() => { // 生成可访问的路由表 -// router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 -// next(to.path); // hack方法 确保addRoutes已完成 -// }) -// }).catch(err => { -// console.log(err); -// }); -// } else { -// // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ -// if (hasPermission(store.getters.roles, to.meta.role)) { -// next();// -// } else { -// next({ path: '/401', query: { noGoBack: true } }); -// } -// // 可删 ↑ -// } -// } -// } else { -// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 -// next() -// } else { -// next('/login'); // 否则全部重定向到登录页 -// NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！ -// } -// } -// }); +router.afterEach(() => { + NProgress.done(); +}); new Vue({ el: '#app', diff --git a/src/router/index.js b/src/router/index.js index 899f8fc..4dc9849 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -28,6 +28,7 @@ Vue.use(Router); * meta : { role: ['admin'] } will control the page role **/ export const constantRouterMap = [ + { path: '/login', component: Login, hidden: true }, { path: '/404', component: Err404, hidden: true }, { path: '/', diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 5437818..349a635 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,49 +1,18 @@ -import { loginByEmail, logout, getInfo } from '@/api/login'; +import { login, logout, getInfo } from '@/api/login'; import Cookies from 'js-cookie'; const user = { state: { - user: '', - status: '', - email: '', - code: '', - uid: undefined, - auth_type: '', token: Cookies.get('Admin-Token'), name: '', avatar: '', - introduction: '', - roles: [], - setting: { - articlePlatform: [] - } + roles: [] }, mutations: { - SET_AUTH_TYPE: (state, type) => { - state.auth_type = type; - }, - SET_CODE: (state, code) => { - state.code = code; - }, SET_TOKEN: (state, token) => { state.token = token; }, - SET_UID: (state, uid) => { - state.uid = uid; - }, - SET_EMAIL: (state, email) => { - state.email = email; - }, - SET_INTRODUCTION: (state, introduction) => { - state.introduction = introduction; - }, - SET_SETTING: (state, setting) => { - state.setting = setting; - }, - SET_STATUS: (state, status) => { - state.status = status; - }, SET_NAME: (state, name) => { state.name = name; }, @@ -52,25 +21,18 @@ const user = { }, SET_ROLES: (state, roles) => { state.roles = roles; - }, - LOGIN_SUCCESS: () => { - console.log('login success') - }, - LOGOUT_USER: state => { - state.user = ''; } }, actions: { - // 邮箱登录 - LoginByEmail({ commit }, userInfo) { + // 登录 + Login({ commit }, userInfo) { const email = userInfo.email.trim(); return new Promise((resolve, reject) => { - loginByEmail(email, userInfo.password).then(response => { + login(email, userInfo.password).then(response => { const data = response.data; - Cookies.set('Admin-Token', response.data.token); + Cookies.set('Admin-Token', data.token); commit('SET_TOKEN', data.token); - commit('SET_EMAIL', email); resolve(); }).catch(error => { reject(error); @@ -87,8 +49,6 @@ const user = { commit('SET_ROLES', data.role); commit('SET_NAME', data.name); commit('SET_AVATAR', data.avatar); - commit('SET_UID', data.uid); - commit('SET_INTRODUCTION', data.introduction); resolve(response); }).catch(error => { reject(error); diff --git a/src/utils/fetch.js b/src/utils/fetch.js index 43caa09..a0829a0 100644 --- a/src/utils/fetch.js +++ b/src/utils/fetch.js @@ -24,34 +24,35 @@ service.interceptors.request.use(config => { // respone拦截器 service.interceptors.response.use( - response => response, + response => { /** * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页 * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中 */ -// const res = response.data; -// if (res.code !== 20000) { -// Message({ -// message: res.message, -// type: 'error', -// duration: 5 * 1000 -// }); -// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; -// if (res.code === 50008 || res.code === 50012 || res.code === 50014) { -// MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { -// confirmButtonText: '重新登录', -// cancelButtonText: '取消', -// type: 'warning' -// }).then(() => { -// store.dispatch('FedLogOut').then(() => { -// location.reload();// 为了重新实例化vue-router对象 避免bug -// }); -// }) -// } -// return Promise.reject(error); -// } else { -// return response.data; -// } + const res = response.data; + if (res.code !== 20000) { + Message({ + message: res.data, + type: 'error', + duration: 5 * 1000 + }); + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 50008 || res.code === 50012 || res.code === 50014) { + MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { + confirmButtonText: '重新登录', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + store.dispatch('FedLogOut').then(() => { + location.reload();// 为了重新实例化vue-router对象 避免bug + }); + }) + } + return Promise.reject(error); + } else { + return response.data; + } + }, error => { console.log('err' + error);// for debug Message({ diff --git a/src/views/404.vue b/src/views/404.vue index 5d6514e..a494ebe 100644 --- a/src/views/404.vue +++ b/src/views/404.vue @@ -23,8 +23,8 @@ import img_404_cloud from '@/assets/404_images/404_cloud.png' export default { - data: { - return: { + data() { + return { img_404, img_404_cloud } diff --git a/src/views/dashboard/default/index.vue b/src/views/dashboard/default/index.vue deleted file mode 100644 index 7fb7d3f..0000000 --- a/src/views/dashboard/default/index.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 89305c5..cd558ee 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,38 +1,18 @@ diff --git a/src/views/login/index.vue b/src/views/login/index.vue index a23eb20..d73d1a2 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -76,12 +76,11 @@ this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true; - this.$store.dispatch('LoginByEmail', this.loginForm).then(() => { + this.$store.dispatch('Login', this.loginForm).then(() => { this.loading = false; this.$router.push({ path: '/' }); // this.showDialog = true; - }).catch(err => { - this.$message.error(err); + }).catch(() => { this.loading = false; }); } else {