feat: 菜单权限校验

src/components/popconfirm_delete/index.vue

@@ -31,7 +31,11 @@ export default {
     methods: {
         async confirm() {
             if (typeof this.url === 'string') {
+                try {
                     await delReq(this.url);
+                } catch (error) {
+                    return;
+                }
             }
             if (typeof this.url === 'object') {
                 switch (this.url.method) {

src/main.js

@@ -6,7 +6,6 @@ import Router from 'vue-router';
 import { initRouter } from './router';
 import VueI18n from 'vue-i18n';
 import { accountModule, settingModule } from './pages/frame/store';
-import globalStore from '@/store';
 import App from './App.vue';
 import Plugins from './plugins';
 import { loadRoutes, loadGuards, setAppOptions } from './utils/routerUtil';
@@ -27,7 +26,6 @@ Vue.config.productionTip = false;
 Vue.use(Vuex);
 //加载 框架的module包括 命名空间accountModule，settingModule
 const store = new Vuex.Store({
-    ...globalStore,
     modules: { accountModule, settingModule },
 });
 

src/pages/frame/components/header/LayoutTopHeaderAvatar.vue

@@ -19,15 +19,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import { logout } from '@/pages/frame/services/accountService';
 import layoutTopHeaderI18n from './i18n';
+import { getUserInfo } from '@/utils';
 
 export default {
     name: 'LayoutTopHeaderAvatar',
     i18n: layoutTopHeaderI18n,
+    data: () => ({ userInfo: {} }),
     computed: {
-        ...mapState(['userInfo']),
         userAvatar() {
             return this.userInfo.userAvatar ? `${this.$fileUrl}${this.userInfo.userAvatar}` : null;
         },
@@ -42,7 +42,7 @@ export default {
         },
     },
     mounted() {
-        this.$store.dispatch('getUserInfo');
+        this.userInfo = getUserInfo();
     },
     methods: {
         logout() {
@@ -50,7 +50,7 @@ export default {
             this.$router.push('/login');
         },
         toUserCenter() {
-            this.$router.push('/user_center');
+            this.$router.push({ name: '个人中心' });
         },
     },
 };

src/pages/frame/services/accountService.js

 import { request, METHOD } from '@/utils/requestUtil';
 import md5 from 'crypto-js/md5';
-import { clearToken, clearUserId } from '@/utils';
+import { clearToken, clearUserId, clearUserInfo } from '@/utils';
 import { logoutApi } from '@/api';
 
 /**
@@ -28,6 +28,7 @@ export function logout() {
     return logoutApi().then(res => {
         clearToken();
         clearUserId();
+        clearUserInfo();
         return res;
     });
 }

src/pages/frame/view/login/Login.vue

@@ -78,9 +78,7 @@
 <script>
 import CommonLayout from '@/pages/frame/layouts/CommonLayout';
 import { login } from '@/pages/frame/services/accountService';
-import { setToken, clearToken, setUserId } from '@/utils';
-import { loadRoutes } from '@/utils/routerUtil';
-import { mapMutations } from 'vuex';
+import { setToken, clearToken, setUserId, setUserInfoByRequest } from '@/utils';
 import loginI18n from './i18n';
 
 export default {
@@ -102,7 +100,6 @@ export default {
         },
     },
     methods: {
-        ...mapMutations('accountModule', ['setUser', 'setPermissions', 'setRoles']),
         onSubmit(e) {
             e.preventDefault();
             this.form.validateFields(async err => {
@@ -115,6 +112,7 @@ export default {
                         const { token, userId } = result;
                         setToken(token);
                         setUserId(userId);
+                        await setUserInfoByRequest();
                         this.$router.replace('/');
                     } catch (error) {
                         // todo

src/pages/user/components/info.vue

@@ -34,6 +34,7 @@
 
 <script>
 import { updateUserInfoApi } from '@/api';
+import { getUserInfo, setUserInfoByRequest } from '@/utils';
 
 export default {
     data: () => ({
@@ -45,41 +46,33 @@ export default {
             userAvatar: '',
         },
         loading: false,
+        loginId: '',
     }),
     computed: {
-        loginId() {
-            return this.$store.state.userInfo.loginId;
-        },
         userAvatar() {
             return this.form.userAvatar ? `${this.$fileUrl}${this.form.userAvatar}` : null;
         },
     },
     mounted() {
-        if (this.loginId) {
-            const userInfo = this.$store.state.userInfo;
+        const userInfo = getUserInfo();
         this.form.userName = userInfo.userName;
         this.form.fixedPhone = userInfo.fixedPhone;
         this.form.mobilePhone = userInfo.mobilePhone;
         this.form.userEmail = userInfo.userEmail;
         this.form.userAvatar = userInfo.userAvatar;
-        }
-    },
-    watch: {
-        '$store.state.userInfo'(userInfo) {
-            this.form.userName = userInfo.userName;
-            this.form.fixedPhone = userInfo.fixedPhone;
-            this.form.mobilePhone = userInfo.mobilePhone;
-            this.form.userEmail = userInfo.userEmail;
-            this.form.userAvatar = userInfo.userAvatar;
-        },
+        this.loginId = userInfo.loginId;
     },
+
     methods: {
         async update() {
             this.loading = true;
             await updateUserInfoApi(this.form);
-            this.loading = false;
-            this.$store.commit('setUserInfo', { ...this.$store.state.userInfo, ...this.form });
             this.$message.success('更新成功');
+            await setUserInfoByRequest();
+            this.loading = false;
+            setTimeout(() => {
+                location.reload();
+            });
         },
     },
 };

src/router/config.js

 import { PageTemplateView, TabsTemplateView } from '@/pages/frame/view/template';
 
-// 路由配置
-const options = {
-    mode: 'history',
-    routes: [
+export const globalRoutes = [
     {
         path: '/login',
         name: '登录页',
@@ -19,6 +16,9 @@ const options = {
         name: '500',
         component: () => import('@/pages/frame/view/exception/500'),
     },
+];
+
+const hasAuthorityRoutes = [
     {
         path: '/',
         component: TabsTemplateView,
@@ -107,14 +107,12 @@ const options = {
                             {
                                 path: 'business',
                                 name: '业务参数',
-                                    component: () =>
-                                        import('@/pages/system/view/parameter/business/index.vue'),
+                                component: () => import('@/pages/system/view/parameter/business/index.vue'),
                             },
                             {
                                 path: 'operation',
                                 name: '运维参数',
-                                    component: () =>
-                                        import('@/pages/system/view/parameter/operation/index.vue'),
+                                component: () => import('@/pages/system/view/parameter/operation/index.vue'),
                             },
                         ],
                     },
@@ -149,12 +147,12 @@ const options = {
             },
         ],
     },
-        {
-            path: '*',
-            name: '404',
-            component: () => import('@/pages/frame/view/exception/404'),
-        },
-    ],
+];
+
+// 路由配置
+const options = {
+    mode: 'history',
+    routes: [...globalRoutes, ...hasAuthorityRoutes],
 };
 
 export default options;

src/router/guards.js

-import { hasAuthority } from '@/utils/authorityUtil';
 import { loginIgnore } from '@/router/index';
+import { getUserInfo } from '@/utils';
 import { checkAuthorization } from '@/utils/requestUtil';
 import NProgress from 'nprogress';
+import { globalRoutes } from '@/router/config';
 
 NProgress.configure({ showSpinner: false });
 
+function hasAuthority(to) {
+    const { path } = to;
+    if (globalRoutes.find(m => m.path === path)) return true;
+    const { menuList = [] } = getUserInfo();
+    // return !!menuList.find(i => i.menuUrl === path);
+    return true;
+}
+
 /**
  * 进度条开始
  * @param to
@@ -44,10 +53,8 @@ const loginGuard = (to, from, next, options) => {
  * @param options
  */
 const authorityGuard = (to, from, next, options) => {
-    const { store, message } = options;
-    const permissions = store.getters['accountModule/permissions'];
-    const roles = store.getters['accountModule/roles'];
-    if (!hasAuthority(to, permissions, roles)) {
+    const { message } = options;
+    if (!hasAuthority(to)) {
         message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`);
         next({ path: '/403' });
         // NProgress.done()

src/store/index.js

-import { getUserInfoApi } from '@/api';
-
-export default {
-    state: {
-        userInfo: {},
-    },
-    mutations: {
-        setUserInfo(state, userInfo) {
-            state.userInfo = userInfo;
-        },
-    },
-    actions: {
-        async getUserInfo({ commit }) {
-            const userInfo = await getUserInfoApi();
-            commit('setUserInfo', userInfo);
-        },
-    },
-};

src/utils/index.js

 export { default as langUtil } from './langUtils';
+import { getUserInfoApi } from '@/api';
 export * from './requestUtil';
 
 const USERID_KEY = 'userId';
@@ -13,6 +14,21 @@ export function clearUserId() {
     window.sessionStorage.removeItem(USERID_KEY);
 }
 
+const USERINFO_KEY = 'USERINFO';
+export async function setUserInfoByRequest() {
+    const userInfo = await getUserInfoApi(getUserId());
+    window.sessionStorage.setItem(USERINFO_KEY, JSON.stringify(userInfo));
+}
+
+export function getUserInfo() {
+    const localUserInfo = window.sessionStorage.getItem(USERINFO_KEY);
+    return JSON.parse(localUserInfo);
+}
+
+export function clearUserInfo() {
+    window.sessionStorage.clear();
+}
+
 /**
  * 转变菜单列表为tree结构
  * @param {Array} menuList 菜单列表