增加基于vue-router，vuex的权限控制，使用mockjs模拟登录及权限数据，由于是随机数据，如果遇到登录失败请重试。

package.json

@@ -20,7 +20,8 @@
     "vue-echarts-v3": "1.0.3",
     "vue-quill-editor": "2.1.6",
     "vue-router": "^2.3.1",
-    "vue-simplemde": "0.3.8"
+    "vue-simplemde": "0.3.8",
+    "vuex": "^2.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/components/common/Header.vue

@@ -23,14 +23,14 @@
         },
         computed:{
             username(){
-                let username = localStorage.getItem('ms_username');
+                let username = this.$store.state.user.username;
                 return username ? username : this.name;
             }
         },
         methods:{
             handleCommand(command) {
                 if(command == 'loginout'){
-                    localStorage.removeItem('ms_username')
+                    this.$store.commit('logout');
                     this.$router.push('/login');
                 }
             }

src/components/common/Sidebar.vue

@@ -5,7 +5,7 @@
                 <template v-if="item.subs">
                     <el-submenu :index="item.index">
                         <template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
-                        <el-menu-item v-for="subItem in item.subs" :index="subItem.index">{{ subItem.title }}
+                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                         </el-menu-item>
                     </el-submenu>
                 </template>

src/components/page/Login.vue

@@ -7,7 +7,8 @@
                     <el-input v-model="ruleForm.username" placeholder="username"></el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                    <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
+                    <el-input type="password" placeholder="password" v-model="ruleForm.password"
+                              @keyup.enter.native="submitForm('ruleForm')"></el-input>
                 </el-form-item>
                 <div class="login-btn">
                     <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
@@ -20,7 +21,7 @@
 
 <script>
     export default {
-        data: function(){
+        data: function () {
             return {
                 ruleForm: {
                     username: '',
@@ -28,10 +29,10 @@
                 },
                 rules: {
                     username: [
-                        { required: true, message: '请输入用户名', trigger: 'blur' }
+                        {required: true, message: '请输入用户名', trigger: 'blur'}
                     ],
                     password: [
-                        { required: true, message: '请输入密码', trigger: 'blur' }
+                        {required: true, message: '请输入密码', trigger: 'blur'}
                     ]
                 }
             }
@@ -41,10 +42,26 @@
                 const self = this;
                 self.$refs[formName].validate((valid) => {
                     if (valid) {
-                        localStorage.setItem('ms_username',self.ruleForm.username);
+                        this.$axios.post('/api/user', this.$qs.stringify({
-                        self.$router.push('/readme');
+                            'username': self.ruleForm.username,
+                            'password': self.ruleForm.password
+                        }))
+                            .then(function (response) {
+                                if (response.data['errno'] == 0) {
+                                    self.$store.commit('login', response.data.user);
+                                    self.$router.push('/readme');
+                                } else {
+                                    self.$alert(response.data['errmsg'], '错误', {
+                                        confirmButtonText: '确定'
+                                    });
+                                }
+                            })
+                            .catch(function (error) {
+                                self.$alert(error, '错误', {
+                                    confirmButtonText: '确定'
+                                });
+                            });
                     } else {
-                        console.log('error submit!!');
                         return false;
                     }
                 });
@@ -54,37 +71,41 @@
 </script>
 
 <style scoped>
-    .login-wrap{
+    .login-wrap {
         position: relative;
-        width:100%;
+        width: 100%;
-        height:100%;
+        height: 100%;
     }
-    .ms-title{
+
+    .ms-title {
         position: absolute;
-        top:50%;
+        top: 50%;
-        width:100%;
+        width: 100%;
         margin-top: -230px;
         text-align: center;
-        font-size:30px;
+        font-size: 30px;
         color: #fff;
 
     }
-    .ms-login{
+
+    .ms-login {
         position: absolute;
-        left:50%;
+        left: 50%;
-        top:50%;
+        top: 50%;
-        width:300px;
+        width: 300px;
-        height:160px;
+        height: 160px;
-        margin:-150px 0 0 -190px;
+        margin: -150px 0 0 -190px;
-        padding:40px;
+        padding: 40px;
         border-radius: 5px;
         background: #fff;
     }
-    .login-btn{
+
+    .login-btn {
         text-align: center;
     }
-    .login-btn button{
+
-        width:100%;
+    .login-btn button {
-        height:36px;
+        width: 100%;
+        height: 36px;
     }
-</style>
+</style>

src/main.js

@@ -7,9 +7,14 @@ import 'element-ui/lib/theme-default/index.css';    // 默认主题
 // import '../static/css/theme-green/index.css';       // 浅绿色主题
 import "babel-polyfill";
 import './mock/index.js';
+import qs from 'qs';
+import store from 'store';
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
+Vue.prototype.$qs = qs;
+Vue.prototype.$store = store;
+
 new Vue({
     router,
     render: h => h(App)
-}).$mount('#app');
+}).$mount('#app');

src/mock/index.js

@@ -1,11 +1,12 @@
 import Mock from 'mockjs';
 import {vuetable} from './vuetable.js';
 import {datasource} from './datasource.js';
+import {user} from './user.js';
 
-let data = [].concat(vuetable,datasource);
+let data = [].concat(vuetable,datasource,user);
 
 data.forEach(function(res){
     Mock.mock(res.path, res.data);
 });
 
-export default Mock;
+export default Mock;

src/mock/user.js

@@ -0,0 +1,23 @@
+export const user = [
+    {
+        path: '/api/user',
+        data: {
+            'errno|0-1': 1,
+            'errmsg': function () {
+                if (this.errno == 1) {
+                    return '用户名或密码错误';
+                }
+                return '';
+            },
+            'user': {
+                "id": "@natural",
+                "username": "@cname",
+                "auth": function () {
+                    var base = ["/basetable", "/vuetable", "/baseform", "/vueeditor", "/markdown", "/upload", "/basecharts", "/mixcharts"]
+                    var start = Math.floor(Math.random() * (base.length - 1))
+                    return ["/", "/login", "/logout", "/readme"].concat(base.slice(-start));
+                }
+            }
+        }
+    }
+]

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router';
 
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
     routes: [
         {
             path: '/',
@@ -12,7 +12,7 @@ export default new Router({
         {
             path: '/readme',
             component: resolve => require(['../components/common/Home.vue'], resolve),
-            children:[
+            children: [
                 {
                     path: '/',
                     component: resolve => require(['../components/page/Readme.vue'], resolve)
@@ -57,3 +57,27 @@ export default new Router({
         },
     ]
 })
+
+router.beforeEach((to, from, next) => {
+
+    if (to.path === '/login' || to.name === 'login') {
+        next()
+    } else {
+        var user = router.app.$store.state.user
+        // 通过state获取权限，登录成功时，获取列表
+        if (!user.id) {
+            return next({path: '/login'})
+        }
+        var auth = user.auth.some(auth => to.path == auth);
+
+        if (!auth) {
+            router.app.$alert('没有权限', '错误', {
+                confirmButtonText: '确定'
+            })
+        }
+        next(auth)
+    }
+
+})
+
+export default router

src/store.js

@@ -0,0 +1,21 @@
+/**
+ * Created by Administrator on 2017.05.16.
+ */
+import Vue from 'vue';
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        user: {}
+    },
+    mutations: {
+        login (state, user) {
+            state.user = user;
+        },
+        logout (state) {
+            state.user = {};
+        }
+    }
+})