add easy-mock

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"',
 })

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"',
 }

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'
+  });
+}
+
+
+

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',

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: '/',

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);

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({

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
      }

src/views/dashboard/default/index.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="dashboard-editor-container">
-        dashboard
-    </div>
-</template>

src/views/dashboard/index.vue

@@ -1,38 +1,18 @@
 <template>
     <div class="dashboard-container">
-        <component v-bind:is="currentRole"> </component>
+      {{name}}
     </div>
 </template>
 
 <script>
     import { mapGetters } from 'vuex';
-    import DefaultDashboard from './default/index';
     export default {
       name: 'dashboard',
-      components: { DefaultDashboard },
-      data() {
-        return {
-          currentRole: 'DefaultDashboard'
-        }
-      },
       computed: {
         ...mapGetters([
           'name',
-          'avatar',
-          'email',
-          'introduction',
           'roles'
         ])
-      },
-      created() {
-        if (this.roles.indexOf('admin') >= 0) {
-          return;
-        }
-        // const isEditor = this.roles.some(v => v.indexOf('editor') >= 0)
-        // if (!isEditor) {
-        //   this.currentRole = 'DefaultDashboard';
-        // }
-        this.currentRole = 'DefaultDashboard';
       }
     }
 </script>

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 {