zoukankan      html  css  js  c++  java
  • vue 后台管理系统菜单权限管理

    来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删

    login登录方法

    login() {
          if (!this.username) {
            return this.$message.error("请输入用户名");
          }
          if (!this.password) {
            return this.$message.error("请输入密码");
          }
          if (this.checked) {
            localStorage.setItem("username", this.username);
            localStorage.setItem("password", this.password);
            localStorage.setItem("checked", 1);
          } else {
            localStorage.removeItem("username");
            localStorage.removeItem("password");
            localStorage.removeItem("token");
          }
          let data = {
            username: this.username,
            password: this.password
          };
    
          this.$store
            .dispatch("login", data)
            .then(() => {
              this.$message.success("登录成功");
              this.$router.push({ path: "/" });
            })
            .catch(() => {
              console.log(222);
              this.$message.error("登陆失败");
              //   this.loading = false;
            });
        },

    store中

    import Vue from "vue";
    import Vuex from "vuex";
    import { getToken, setToken, removeToken, deepClone } from '@/utils/auth'
    import { formatDate } from "@/utils/index.js";
    import { login, getUserInfo } from "@/api/mine.js";
    import { asyncRouterMap, constantRoutes } from '@/router';
    
    Vue.use(Vuex);
    
    function hasPermission(menuMap, route) {
        if (route.meta && route.meta.menu_code) {
            for (const item of menuMap) {
                if (item === route.meta.menu_code) {
                    return true
                }
            }
            return false
        } else {
            return true
        }
    }
    function filterAsyncRouter(asyncRouterMap, menuMap) {
        const accessedRouters = asyncRouterMap.filter(route => {
            if (hasPermission(menuMap, route)) {
                if (route.children && route.children.length) {
                    route.children = filterAsyncRouter(route.children, menuMap)
                }
                return true
            }
            return false
        })
        return accessedRouters
    }
    
    const store = new Vuex.Store({
        state: {
            userId: '',
            mapcontrols: '', //地图的集合
            carlist: '', //行车的集合
            attachment: '', //附近的集合
            menulist: null,//一级导航
            lnglat: {},//经纬度
            actionUrl: process.env.VUE_APP_BASE_API + "/couplet-admin/file/uploadImage", //上传图片的url
            tokenObj: { "author-token-key": localStorage.getItem("token") },  //上传的请求头token
            token: getToken(),
            routers: constantRoutes,
            addRouters: []
        },
        getters: {
            userId_: state => state.userId,
            mapcontrols_: state => state.mapcontrols,
            carlist_: state => state.carlist,
            attachment_: state => state.attachment,
            menulist_: state => state.menulist,
            lnglat_: state => state.lnglat,
            actionUrl_: state => state.actionUrl,
            tokenObj_: state => state.tokenObj,
            token_: state => state.token,
            routers_: state => state.routers,
            addRouters_: state => state.addRouters
        },
        mutations: {
            changemapcontrols: function (state, payload) {
                state.mapcontrols = payload
            },
            changecarlist: function (state, payload) {
                state.carlist = payload
            },
            changeMenulist: function (state, payload) {
                state.menulist = payload
            },
            changecheckAttachment: function (state, payload) {
                state.attachment = payload
            },
            changelnglat: function (state, payload) {
                state.lnglat = payload
            },
            changecheckUserId: function (state, payload) {
                state.userId = payload
            },
            SET_TOKEN: (state, token) => {
                state.token = token
            },
            SET_ROUTERS: (state, routers) => {
                state.addRouters = deepClone(routers)
                state.routers = deepClone(constantRoutes.concat(routers))
            }
        },
        actions: {
            changeformDatas({ commit }, datatime) {
                return new Promise((resolve, reject) => {
                    let time = formatDate(Number(datatime), "yyyy-MM-dd")
                    resolve(time)
                })
            },
            login({ commit }, userInfo) {
                const { username, password } = userInfo
                return new Promise((resolve, reject) => {
                    login({ username: username.trim(), password: password }).then(response => {
                        commit('SET_TOKEN', response.body)
                        setToken(response.body)
                        resolve()
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            getInfo({ dispatch, commit, state }) {
                return new Promise((resolve, reject) => {
                    getUserInfo().then(response => {
                        // if (!data) {
                        //     reject('Verification failed, please Login again.')
                        // }
                        // const menus = data.menuCodes
                        commit('changecheckUserId', response.body.userId)
                        var data = response.body
                        console.log('response', data)
                        // localStorage.setItem('MENU_CODE', menus)
                        const menus = ['/equipmentManagement', '/camera']
                        dispatch('GenerateRoutes', menus).then(res => {
                            resolve(data)
                        })
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            resetToken({ commit }) {
                return new Promise(resolve => {
                    commit('SET_TOKEN', '')
                    removeToken()
                    resolve()
                })
            },
            GenerateRoutes({ commit }, data) {
                return new Promise(resolve => {
                    const accessRouters = filterAsyncRouter(asyncRouterMap, data)
                    accessRouters.push({ path: '*', redirect: '/404', hidden: true })
                    commit('SET_ROUTERS', accessRouters)
                    resolve()
                })
            }
        }
    });
    export default store
    @/utils/auth 中
    // import Cookies from 'js-cookie'
    
    const TokenKey = 'Authorization'
    
    export function getToken() {
      // return Cookies.get(TokenKey)
      return localStorage.getItem(TokenKey)
    }
    
    export function setToken(token) {
      // return Cookies.set(TokenKey, token)
      return localStorage.setItem(TokenKey, token)
    }
    
    export function removeToken() {
      // return Cookies.remove(TokenKey)
      return localStorage.removeItem(TokenKey)
    }
    
    export function deepClone(source) {
      if (!source && typeof source !== 'object') {
        throw new Error('error arguments', 'shallowClone')
      }
      const targetObj = source.constructor === Array ? [] : {}
      for (const keys in source) {
        if (source.hasOwnProperty(keys)) {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = source[keys].constructor === Array ? [] : {}
            targetObj[keys] = deepClone(source[keys])
          } else {
            targetObj[keys] = source[keys]
          }
        }
      }
      return targetObj
    }
    @/router 中
    import Vue from "vue"
    import Router from "vue-router"
    import store from "./store";
    
    Vue.use(Router)
    
    // console.log("store.getters",store.getters)
    // console.log("store.getters.menulist_",store.getters.menulist_)
    
    const notFound = () => import('@/views/404.vue') //404
    //登录相关
    const login = () => import('@/views/mine/login.vue') //用户登录
    const phoneLogin = () => import('@/views/mine/phoneLogin.vue') //手机登录
    const retrievePassword = () => import('@/views/mine/retrievePassword.vue') //找回密码
    const modifyPassword = () => import('@/views/mine/modifyPassword.vue') //修改密码
    
    const layout = () => import('@/views/layout/index.vue') //导航
    const Index = () => import('@/views/index/index.vue') //首页
    
    //管控中心菜单
    const mapControls = () => import('@/views/controlsMenu/mapControls/index.vue') //管控地图
    const security = () => import('@/views/controlsMenu/security/index.vue') //安防管理
    const fire = () => import('@/views/controlsMenu/fire/index.vue') //消防管理
    const car = () => import('@/views/controlsMenu/car/index.vue') //车行管理
    const lighting = () => import('@/views/controlsMenu/lighting/index.vue') //智慧照明
    const checkAttachment = () => import('@/views/controlsMenu/checkAttachment/index.vue') //附近设备
    
    //设备管理菜单
    const equipmentManagement = () => import('@/views/equimentMenu/equipmentManagement/index.vue') //设备管理
    const camera = () => import('@/views/equimentMenu/camera/index.vue') //摄像头
    const wifismoke = () => import('@/views/equimentMenu/wifismoke/index.vue') //路灯控制
    const lightAll = () => import('@/views/equimentMenu/lightAll/index.vue') //智慧灯杆
    const postScreen = () => import('@/views/equimentMenu/postScreen/index.vue') //发布屏
    //告警管理菜单
    const alarmManagement = () => import('@/views/alarmMenu/alarmManagement/index.vue') //告警管理
    const alarmManagementHoistory = () => import('@/views/alarmMenu/alarmManagementHoistory/index.vue') //告警管理历史
    
    //事件工单菜单
    const eventOrder = () => import('@/views/orderMenu/eventOrder/index.vue') //事件工单
    const eventOrderHistory = () => import('@/views/orderMenu/eventOrderHistory/index.vue') //事件工单历史
    
    //巡检菜单
    const inspectionTrajectory = () => import('@/views/inspectionMenu/inspectionTrajectory/index.vue') //巡检轨迹
    const InspectionTask = () => import('@/views/inspectionMenu/InspectionTask/index.vue') //巡检任务单
    const InspectionProject = () => import('@/views/inspectionMenu/InspectionProject/index.vue') //巡检项目组
    const InspectionConfig = () => import('@/views/inspectionMenu/InspectionConfig/index.vue') //巡检配置
    
    //预案菜单
    const emergencyPlan = () => import('@/views/planMenu/emergencyPlan/index.vue') //应急预案
    
    //系统配置菜单
    const user = () => import('@/views/systemMenu/user/index.vue') //用户管理
    const org = () => import('@/views/systemMenu/org/index.vue') //组织管理
    const area = () => import('@/views/systemMenu/area/index.vue') //区域管理
    const role = () => import('@/views/systemMenu/role/index.vue') //角色管理
    const menu = () => import('@/views/systemMenu/menu/index.vue') //菜单管理
    const log = () => import('@/views/systemMenu/log/index.vue') //操作日志
    const partition = () => import('@/views/systemMenu/partition/index.vue') //系统项目管理
    const dictionary = () => import('@/views/systemMenu/dictionary/index.vue') //数据字典管理
    const appPlat = () => import('@/views/systemMenu/platform/appPlat/index.vue') //平台服务管理  -- 应用平台
    const provider = () => import('@/views/systemMenu/platform/provider/index.vue') //平台服务管理  -- 供应商平台
    const configManage = () => import('@/views/systemMenu/platform/provider/configManage/index.vue') //平台服务管理  -- 供应商平台--园区配置管理
    const apiManage = () => import('@/views/systemMenu/platform/provider/apiManage/index.vue') //平台服务管理  -- 供应商平台--接口管理
    
    
    //-----------------------------
    /**
     * constantRoutes
     * a base page that does not have permission requirements
     * all roles can be accessed
     */
    export const constantRoutes = [
        { path: "/404", name: '404', component: notFound, hidden: true },
        { path: "/login", name: "login", component: login, hidden: true },
        { path: "/phoneLogin", name: "phoneLogin", component: phoneLogin, hidden: true },
        { path: "/retrievePassword", name: "retrievePassword", component: retrievePassword, hidden: true },
        { path: "/modifyPassword", name: "modifyPassword", component: modifyPassword, hidden: true },
        {
            path: '/',
            component: layout,
            redirect: '/mapControls',
            children: [{
                path: 'mapControls',
                name: 'mapControls',
                component: mapControls,
            },
            ]
        },
    ]
    //动态加载路由
    export const asyncRouterMap = [
        {
            path: '/equipmentManagement',
            component: layout,
            meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' },
            redirect: '/equipmentManagement',
            children: [{
                path: '/equipmentManagement',
                name: 'equipmentManagement',
                component: equipmentManagement,
                meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' },
                hidden: true
            },
            {
                path: '/camera',
                name: 'camera',
                component: camera,
                meta: { title: 'camera', menu_code: '/camera' },
                hidden: true
            }
            ]
        },
    ]
    
    const createRouter = () => new Router({
        // mode: 'history', // require service support
        // mode: 'hash', // require service support
        scrollBehavior: () => ({ y: 0 }),
        routes: constantRoutes
    })
    
    const router = createRouter()
    
    // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
    export function resetRouter() {
        const newRouter = createRouter()
        router.matcher = newRouter.matcher // reset router
    }
    
    export default router

    permission.js 中

    import router from './router'
    import store from './store'
    import { Message } from 'element-ui'
    import NProgress from 'nprogress' // progress bar
    import 'nprogress/nprogress.css' // progress bar style
    import { getToken } from '@/utils/auth' // get token from cookie
    
    NProgress.configure({ showSpinner: false }) // NProgress Configuration  是否有转圈效果
    const whiteList = ['/login'] // 没有重定向白名单
    
    router.beforeEach(async (to, from, next) => {
      // 开始进度条
      NProgress.start()
      // 确定用户是否已登录
      const hasToken = getToken()
      if (hasToken) {
        if (to.path === '/login') {
          // 如果已登录,则重定向到主页
          next({ path: '/' })
          NProgress.done()
        } else {
          const hasGetUserInfo = store.getters.userId_;
          if (hasGetUserInfo) {
            // console.log("有用户信息");
            next();
          } else {
            // console.log("没用户信息");
            try {
              // 获得用户信息
              await store.dispatch('getInfo');
              router.addRoutes(store.getters.addRouters_)//动态路由
              next({ ...to })
            } catch (error) {
              // 删除token,进入登录页面重新登录
              await store.dispatch('resetToken');
              Message.error(error || 'Has Error');
              next(`/login?redirect=${to.path}`);
              NProgress.done();
            }
          }
    
        }
      } else {
        /* has no token*/
        if (whiteList.indexOf(to.path) !== -1) {
          // 在免费登录白名单,直接去
          next()
        } else {
          // 没有访问权限的其他页面被重定向到登录页面。
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    })
    
    router.afterEach(() => {
      // 完成进度条
      NProgress.done()
    })

    基本剩下的雷同文章来源了

  • 相关阅读:
    HTTP 方法:GET 对比 POST
    js中return的用法
    Javascript:谈谈JS的全局变量跟局部变量
    ajax请求数据之后在已经有的数据前面打对勾的方法
    JS中的call()和apply()方法区别
    聚簇索引与非聚簇索引的区别
    Android开发(27)--TextView单击链接弹出Activity
    Android 4.2启动代码分析(一)
    Android重启应用程序代码
    java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
  • 原文地址:https://www.cnblogs.com/Byme/p/11497719.html
Copyright © 2011-2022 走看看