添加vuex，修复login+token

Yi.Framework/Yi.Framework.ApiMicroservice/Controllers/AccountController.cs

@@ -39,8 +39,8 @@ namespace Yi.Framework.ApiMicroservice.Controllers
             if( user_data!=null)
             {
                 
-                var toke = MakeJwt.app(user_data);
-                return Result.Success().SetData(new { user = new { _user.id, _user.username, _user.introduction, _user.icon, _user.nick }, toke });
+                var token = MakeJwt.app(user_data);
+                return Result.Success().SetData(new { user = new { _user.id, _user.username, _user.introduction, _user.icon, _user.nick }, token });
             }
             return Result.Error();
         }

Yi.Vue/src/layouts/default/AppBar.vue

@@ -10,17 +10,11 @@
     height="70"
     flat
   >
-    <v-app-bar-nav-icon
-      class="hidden-md-and-up"
-      @click="drawer = !drawer"
-    />
+    <v-app-bar-nav-icon class="hidden-md-and-up" @click="$store.state.home.drawer = !$store.state.home.drawer;" />
 
     <default-drawer-toggle class="hidden-sm-and-down" />
 
-    <v-toolbar-title
-      class="font-weight-light text-h5"
-      v-text="name"
-    />
+    <v-toolbar-title class="font-weight-light text-h5" v-text="name" />
 
     <v-spacer />
 
@@ -35,45 +29,50 @@
 </template>
 
 <script>
-  // Utilities
-  // import { get, sync } from 'vuex-pathify'
+// Utilities
+// import { get, sync } from 'vuex-pathify'
 
-  export default {
-    data:()=>({
-      drawer:true,
-      name:"系统"
-    }),
-    name: 'DefaultBar',
+export default {
+  
+  data: () => ({
+    name: "系统",
+  }),
+  name: "DefaultBar",
 
-    components: {
-      DefaultAccount: () => import(
+  components: {
+    DefaultAccount: () =>
+      import(
         /* webpackChunkName: "default-account" */
-        './widgets/Account'
+        "./widgets/Account"
       ),
-      DefaultDrawerToggle: () => import(
+    DefaultDrawerToggle: () =>
+      import(
         /* webpackChunkName: "default-drawer-toggle" */
-        './widgets/DrawerToggle'
+        "./widgets/DrawerToggle"
       ),
-      DefaultGoHome: () => import(
+    DefaultGoHome: () =>
+      import(
         /* webpackChunkName: "default-go-home" */
-        './widgets/GoHome'
+        "./widgets/GoHome"
       ),
-      DefaultNotifications: () => import(
+    DefaultNotifications: () =>
+      import(
         /* webpackChunkName: "default-notifications" */
-        './widgets/Notifications'
+        "./widgets/Notifications"
       ),
-      DefaultSearch: () => import(
+    DefaultSearch: () =>
+      import(
         /* webpackChunkName: "default-search" */
-        './widgets/Search'
+        "./widgets/Search"
       ),
-    },
+  },
 
-    // computed: {
-    //   ...sync('app', [
-    //     'drawer',
-    //     'mini',
-    //   ]),
-    //   name: get('route/name'),
-    // },
-  }
+  // computed: {
+  //   ...sync('app', [
+  //     'drawer',
+  //     'mini',
+  //   ]),
+  //   name: get('route/name'),
+  // },
+};
 </script>

Yi.Vue/src/layouts/default/Drawer.vue

@@ -1,24 +1,17 @@
 <template>
   <v-navigation-drawer
     id="default-drawer"
-    v-model="drawer"
+    v-model="$store.state.home.drawer"
     :dark="dark"
     :right="$vuetify.rtl"
-    :src="drawerImage ? image : ''"
-    :mini-variant.sync="mini"
+    :src="$store.state.home.drawerImage ? image : ''"
+    :mini-variant.sync="$store.state.home.mini"
     mini-variant-width="80"
     app
     width="260"
   >
-    <template
-      v-if="drawerImage"
-      #img="props"
-    >
-      <v-img
-        :key="image"
-        :gradient="gradient"
-        v-bind="props"
-      />
+    <template v-if="$store.state.home.drawerImage" #img="props">
+      <v-img :key="image" :gradient="gradient" v-bind="props" />
     </template>
 
     <div class="px-2">
@@ -41,15 +34,8 @@
           Documentation
         </app-btn>
 
-        <app-btn
-          block
-          class="text-none"
-          color="secondary"
-          href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-pro"
-        >
-          <v-icon left>
-            mdi-package-up
-          </v-icon>
+        <app-btn block class="text-none" color="secondary" @click="logout">
+          <v-icon left> mdi-package-up </v-icon>
 
           退出
         </app-btn>
@@ -61,102 +47,109 @@
 </template>
 
 <script>
-  // Utilities
-  // import { get, sync } from 'vuex-pathify'
+// Utilities
+// import { get, sync } from 'vuex-pathify'
 
-  export default {
+export default {
+  methods: {
+    logout() {
+      this.$store.dispatch("Logout").then((resp) => {
+        this.$router.push({ path: "/login" });
+      });
+    },
+  },
+  data: () => ({
+    image:
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
 
+    gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
 
-    data:()=>({
-      image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
-      mini: false,
-      drawer: null,
-       drawerImage: true,
-        gradient: 
-    'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
+    dark: null,
 
-      dark:null,
-     
-      items: [
+    items: [
       {
         title: "首页",
         icon: "mdi-view-dashboard",
-        to: "/"
+        to: "/",
       },
       {
         title: "用户角色管理",
         icon: "mdi-account",
         to: "",
-        children:[{
-          title:"用户管理",
-          icon:"mdi-account",
-          to:"/admuser/",
-          children:[]
-        },
-        {
-          title:"角色管理",
-          icon:"mdi-account",
-          to:"/admrole/",
-          children:[]
-        }
-        ]
+        children: [
+          {
+            title: "用户管理",
+            icon: "mdi-account",
+            to: "/admuser/",
+            children: [],
+          },
+          {
+            title: "角色管理",
+            icon: "mdi-account",
+            to: "/admrole/",
+            children: [],
+          },
+        ],
       },
       {
         title: "菜单接口管理",
         icon: "mdi-clipboard-outline",
         to: "",
-        children:[{
-          title:"菜单管理",
-          icon:"mdi-account",
-          to:"/admMenu/",
-          children:[]
-        },
-        {
-          title:"接口管理",
-          icon:"mdi-account",
-          to:"/admMould/",
-          children:[]
-        },
-                {
-          title:"角色菜单分配管理",
-          icon:"mdi-account",
-          to:"/admRoleMenu/",
-          children:[]
-        },
-        ]
+        children: [
+          {
+            title: "菜单管理",
+            icon: "mdi-account",
+            to: "/admMenu/",
+            children: [],
+          },
+          {
+            title: "接口管理",
+            icon: "mdi-account",
+            to: "/admMould/",
+            children: [],
+          },
+          {
+            title: "角色菜单分配管理",
+            icon: "mdi-account",
+            to: "/admRoleMenu/",
+            children: [],
+          },
+        ],
       },
     ],
-    }),
-    name: 'DefaultDrawer',
+  }),
+  name: "DefaultDrawer",
 
-    components: {
-      DefaultDrawerHeader: () => import(
+  components: {
+    DefaultDrawerHeader: () =>
+      import(
         /* webpackChunkName: "default-drawer-header" */
-        './widgets/DrawerHeader'
+        "./widgets/DrawerHeader"
       ),
-      DefaultList: () => import(
+    DefaultList: () =>
+      import(
         /* webpackChunkName: "default-list" */
-        './List'
+        "./List"
       ),
-    },
+  },
 
-    // computed: {
-    //   ...get('user', [
-    //     'dark',
-    //     'gradient',
-    //     'image',
-    //   ]),
-    //   ...get('app', [
-    //     'items',
-    //     'version',
-    //   ]),
-    //   ...sync('app', [
-    //     'drawer',
-    //     'drawerImage',
-    //     'mini',
-    //   ]),
-    // },
-  }
+  // computed: {
+  //   ...get('user', [
+  //     'dark',
+  //     'gradient',
+  //     'image',
+  //   ]),
+  //   ...get('app', [
+  //     'items',
+  //     'version',
+  //   ]),
+  //   ...sync('app', [
+  //     'drawer',
+  //     'drawerImage',
+  //     'mini',
+  //   ]),
+  // },
+};
 </script>
 
 <style lang="sass">

Yi.Vue/src/layouts/default/Settings.vue

@@ -8,11 +8,15 @@
       flat
       link
       min-width="100"
-      style="position: fixed; top: 115px; right: -35px; border-radius: 8px; z-index: 1;"
+      style="
+        position: fixed;
+        top: 115px;
+        right: -35px;
+        border-radius: 8px;
+        z-index: 1;
+      "
     >
-      <v-icon large>
-        mdi-cog
-      </v-icon>
+      <v-icon large> mdi-cog </v-icon>
     </v-card>
 
     <v-menu
@@ -27,22 +31,12 @@
       origin="top right"
       transition="scale-transition"
     >
-      <v-card
-        class="text-center mb-0"
-        width="300"
-      >
+      <v-card class="text-center mb-0" width="300">
         <v-card-text>
           <strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
 
-          <v-item-group
-            v-model="color"
-            mandatory
-          >
-            <v-item
-              v-for="color in colors"
-              :key="color"
-              :value="color"
-            >
+          <v-item-group v-model="color" mandatory>
+            <v-item v-for="color in colors" :key="color" :value="color">
               <template v-slot="{ active, toggle }">
                 <v-avatar
                   :class="active && 'v-settings__item--active'"
@@ -59,10 +53,7 @@
 
           <strong class="mb-3 d-inline-block">SIDEBAR BACKGROUND</strong>
 
-          <v-item-group
-            v-model="gradient"
-            mandatory
-          >
+          <v-item-group v-model="gradient" mandatory>
             <v-item
               v-for="(scrim, index) in gradients"
               :key="scrim"
@@ -83,13 +74,8 @@
 
           <v-divider class="my-4 secondary" />
 
-          <v-row
-            align="center"
-            no-gutters
-          >
-            <v-col cols="auto">
-              Dark Mode
-            </v-col>
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> Dark Mode </v-col>
 
             <v-spacer />
 
@@ -105,19 +91,14 @@
 
           <v-divider class="my-4 secondary" />
 
-          <v-row
-            align="center"
-            no-gutters
-          >
-            <v-col cols="auto">
-              Sidebar Mini
-            </v-col>
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> Sidebar Mini </v-col>
 
             <v-spacer />
 
             <v-col cols="auto">
               <v-switch
-                v-model="mini"
+                v-model="$store.state.home.mini"
                 class="ma-0 pa-0"
                 color="secondary"
                 hide-details
@@ -127,13 +108,8 @@
 
           <v-divider class="my-4 secondary" />
 
-          <v-row
-            align="center"
-            no-gutters
-          >
-            <v-col cols="auto">
-              Sidebar Image
-            </v-col>
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> Sidebar Image </v-col>
 
             <v-spacer />
 
@@ -151,10 +127,7 @@
 
           <strong class="mb-3 d-inline-block">IMAGES</strong>
 
-          <v-card
-            :disabled="!drawerImage"
-            flat
-          >
+          <v-card :disabled="!drawerImage" flat>
             <v-item-group
               v-model="image"
               class="d-flex justify-space-between mb-3"
@@ -171,11 +144,7 @@
                     class="d-inline-block v-settings__item"
                     @click="toggle"
                   >
-                    <v-img
-                      :src="img"
-                      height="100"
-                      width="50"
-                    />
+                    <v-img :src="img" height="100" width="50" />
                   </v-sheet>
                 </template>
               </v-item>
@@ -210,23 +179,12 @@
             <strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
           </div>
 
-          <v-btn
-            class="ma-1"
-            color="#55acee"
-            dark
-            rounded
-          >
+          <v-btn class="ma-1" color="#55acee" dark rounded>
             <v-icon>mdi-twitter</v-icon>
             - 45
           </v-btn>
 
-          <v-btn
-            class="ma-1"
-            color="#3b5998"
-            dark
-            default
-            rounded
-          >
+          <v-btn class="ma-1" color="#3b5998" dark default rounded>
             <v-icon>mdi-facebook</v-icon>
             - 50
           </v-btn>
@@ -237,74 +195,66 @@
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
+// Mixins
+import Proxyable from "vuetify/lib/mixins/proxyable";
 
-  // Vuex
-  // import { get, sync } from 'vuex-pathify'
+// Vuex
+// import { get, sync } from 'vuex-pathify'
 
-  export default {
-    name: 'DashboardCoreSettings',
+export default {
+  name: "DashboardCoreSettings",
 
-    mixins: [Proxyable],
+  mixins: [Proxyable],
 
-    data: () => ({
-  image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
-      mini: false,
-      drawer: null,
-       drawerImage: true,
-        gradient: 
-    'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
-images: [
-    'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
-    'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
-    'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
-    'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
-  ],
+
+
+  data: () => ({
+    image:
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
+    drawer: null,
+    drawerImage: true,
+    gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
+    images: [
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg",
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg",
+      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg",
+    ],
     gradients: [
-    'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
-    'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
-    'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
-  ],
-      dark:null,
+      "rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)",
+      "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
+      "rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)",
+    ],
+    dark: null,
 
+    color: "#E91E63",
+    colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
+    menu: false,
+    saveImage: "",
+  }),
 
+  // computed: {
+  //   ...sync('app', [
+  //     'drawer',
+  //     'drawerImage',
+  //     'mini',
+  //   ]),
+  //   ...sync('user', [
+  //     'drawer@gradient',
+  //     'drawer@image',
+  //   ]),
+  //   ...get('user', [
+  //     'images',
+  //     'gradients',
+  //   ]),
+  // },
 
-      color: '#E91E63',
-      colors: [
-        '#9C27b0',
-        '#00CAE3',
-        '#4CAF50',
-        '#ff9800',
-        '#E91E63',
-        '#FF5252',
-      ],
-      menu: false,
-      saveImage: '',
-    }),
-
-    // computed: {
-    //   ...sync('app', [
-    //     'drawer',
-    //     'drawerImage',
-    //     'mini',
-    //   ]),
-    //   ...sync('user', [
-    //     'drawer@gradient',
-    //     'drawer@image',
-    //   ]),
-    //   ...get('user', [
-    //     'images',
-    //     'gradients',
-    //   ]),
-    // },
-
-    watch: {
-      color (val) {
-        this.$vuetify.theme.themes[this.isDark ? 'dark' : 'light'].primary = val
-      },
+  watch: {
+    color(val) {
+      this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
     },
-  }
+  },
+};
 </script>
 
 <style lang="sass">

Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue

@@ -4,10 +4,10 @@
     elevation="1"
     fab
     small
-    @click="mini = !mini"
+    @click="$store.state.home.mini = !$store.state.home.mini"
   >
     <v-icon>
-      {{ mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
+      {{ $store.state.home.mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
     </v-icon>
   </v-btn>
 </template>
@@ -17,8 +17,9 @@
   // import { sync } from 'vuex-pathify'
 
   export default {
+
     data:()=>({
-      mini:false
+     
     }),
     name: 'DefaultDrawerToggle',
 

Yi.Vue/src/store/modules/home.js

@@ -1,42 +1,53 @@
-const state = { //状态
-    plateId: 0,
-    discussId: 0,
-    plateString: "",
+const state = {
+    drawer: null,
+    drawerImage: true,
+    mini: false,
+    items: [{
+            title: 'Dashboard',
+            icon: 'mdi-view-dashboard',
+            to: '/',
+        },
+        {
+            title: 'User Profile',
+            icon: 'mdi-account',
+            to: '/components/profile/',
+        },
+        {
+            title: 'Regular Tables',
+            icon: 'mdi-clipboard-outline',
+            to: '/tables/regular/',
+        },
+        {
+            title: 'Typography',
+            icon: 'mdi-format-font',
+            to: '/components/typography/',
+        },
+        {
+            title: 'Icons',
+            icon: 'mdi-chart-bubble',
+            to: '/components/icons/',
+        },
+        {
+            title: 'Google Maps',
+            icon: 'mdi-map-marker',
+            to: '/maps/google/',
+        },
+        {
+            title: 'Notifications',
+            icon: 'mdi-bell',
+            to: '/components/notifications/',
+        },
+    ],
 }
 
 const mutations = { //变化//载荷
-    SET_PLATEID(state, n) {
-        state.plateId = n
-    },
-    SET_DOSCUSSIDSTRING(state, n) {
-        state.plateString = n
-    },
-    SET_DOSCUSSID(state, n) {
-        state.discussId = n
-    },
 }
 
 //在action中可以配合axios进行权限判断
 const actions = { //动作
-    set_plateId(context, n) {
-        context.commit('SET_PLATEID', n)
-    },
-    set_plateString(context, n) {
-        context.commit('SET_DOSCUSSIDSTRING', n)
-    },
-    set_discussId(context, n) {
-        context.commit('SET_DOSCUSSID', n)
-    }
+
 }
+const getters = {}
 
-// const getters = { //类似与计算属性 派生属性
-//     msg(state) {
-//         if (state.count > 80) {
-//             return "成绩优异"
-//         } else {
-//             return "成绩不合格"
-//         }
-//     }
-// }
 
-export default { state, mutations, actions }
+export default { state, mutations, actions, getters }

Yi.Vue/src/store/modules/user.js

@@ -4,7 +4,26 @@ import accountApi from "@/api/accountApi"
 //再导入axion请求
 const state = { //状态
     token: getToken(),
-    user: getUser()
+    user: getUser(),
+    dark: false,
+    drawer: {
+        image: 0,
+        gradient: 0,
+        mini: false,
+    },
+    gradients: [
+        'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
+        'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
+        'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
+    ],
+    images: [
+        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
+        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
+        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
+        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
+    ],
+    notifications: [],
+    rtl: false
 }
 
 const mutations = { //变化//载荷
@@ -18,21 +37,12 @@ const mutations = { //变化//载荷
     }
 }
 
-
-
 //在action中可以配合axios进行权限判断
 const actions = { //动作
     setIcon({ commit, state }, icon) {
         state.user.icon = icon
         commit('SET_USER', state.user)
     },
-
-
-    setLevel({ commit, state }, level) {
-
-        commit('SET_USER', state.user)
-    },
-
     // qqUpdate({ state }, openid) {
     //     return new Promise((resolv, reject) => {
     //         qqApi.qqupdate(openid, state.user.id).then(resp => {
@@ -64,7 +74,6 @@ const actions = { //动作
                     commit('SET_TOKEN', resp.data.token)
                     commit('SET_USER', resp.data.user)
                 }
-
                 resolv(resp)
             }).catch(error => {
                 reject(error)
@@ -118,5 +127,21 @@ const actions = { //动作
 
 }
 
+const getters = { //类似与计算属性 派生属性
+    dark: (state, getters) => {
+        return (
+            state.dark ||
+            getters.gradient.indexOf('255, 255, 255') === -1
+        )
+    },
+    gradient: state => {
+        return state.gradients[state.drawer.gradient]
+    },
+    image: state => {
+        return state.drawer.image === '' ? state.drawer.image : state.images[state.drawer.image]
+    }
+}
 
-export default { state, mutations, actions }
+
+
+export default { state, mutations, actions, getters }

Yi.Vue/src/util/myaxios.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-// import store from '../store/index'
+import store from '../store/index'
 // import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
 const myaxios = axios.create({
         // baseURL:'/'// 
@@ -11,7 +11,7 @@ const myaxios = axios.create({
     })
     // 请求拦截器
 myaxios.interceptors.request.use(function(config) {
-    // config.headers.Authorization = 'Bearer ' + store.state.user.token;
+    config.headers.Authorization = 'Bearer ' + store.state.user.token;
     // store.dispatch("openLoad");
     return config;
 }, function(error) {