亲宝软件园·资讯

展开

使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题

一叶、知秋 人气:3

如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| 。

为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发,只是为了学习,本文重点在于vue的动态路由添加,动态权限以及页面处理的一些小问题)。

一、项目组成

  VUE 2.6.11 + axios +VueX + ElementUI 2.13.2 

二、整体思路

  1.  用户登录后,获取菜单数据,用以显示菜单。

  2.  用户登录后,后台获取Vue路由数据,用以动态添加到VueRouter中。

  3.  用户登录后,从后台获取用户的权限,用以控制用户是否对某一功能具有可操作权限。

三、具体实现

·   1.  登录。由于本人学习重点是使用VUE动态添加路由、菜单显示和权限控制,所以登录页面没有做具体功能,点击登录按钮就表示登录成功了。

      由于登录页是用户的第一界面,不存在任何权限问题,所以笔者就直接将登录页的路由直接写在了VueRouter实例中。如下:

   

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/Login',
  name: 'Login',
  component: () => import('../views/Login.vue')
}]

export function initRouter() {
  return new VueRouter({
    routes
  })
}

export default initRouter()

  用户通过 http://localhost:8080/#/login 可访问到登陆页面:

 

 

       点击登录按钮表示登录成功!

  登录成功后的处理:

  (1)向后台发请求拿到路由数据并存入VueX的state中,并通过addRoutes(routerObjArr)动态添加到路由实例中。注:后台返回的数据结构需跟route相一致,如图:

  前端所需数据结构:

  

  后台返回的数据结构:

  

 

 

 

 

 

   细节处理:由于后台返回的component字段是个组件地址字符串,这就需要将后台返回的route数据 一 一 做处理,通过import() 方法动态的加载组件,然后将返回的compoent对象重新赋值到component字段上。如图:

  

 

  代码:

  

const _import = require('@/router/_import_' + process.env.NODE_ENV) //获取组件的方法
/**将router的json字符串中的component转换为组件对象 */
export function filterAsyncRouter(asyncRouterMap) {
  if (!asyncRouterMap) return [];

  function _iter(before) {
    const after = Object.assign({}, before)
    if (after.component) {
      after.component = _import(after.component);
    }
    if (after.children && after.children.length) {
      after.children = filterAsyncRouter(after.children);
    }
    return after
  }

  return asyncRouterMap.map(_iter)

}

 

 

   图中所用的import方法,根据生产环境不同,引用不同的文件,如图:

  

 

 

   各自的代码如下:

  _import_development.js:

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

  _import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

  将后台的返回的路由数据处理完成后,最后就可以使用addRoutes方法动态加入VueRouter中了。此时,用户便可以按照路由访问页面了。代码如下:

//动态生成路由
      axios
        .get("https://localhost:5001/AdminApi/Home/GetMenuJson?userid=" + 1)
        .then(res => {
          //取出路由列表 (isRoute=1)
          res.data.obj.router[0].children = res.data.obj.router[0].children.filter(
            a => a.meta.isRoute == 1 //isRoute=1的
          );

          //存入缓存
          this.$store.commit("setRoutes", res.data.obj.router);

          //转换组件对象
          var getRouter = filterAsyncRouter(res.data.obj.router);

          //打印当前路由列表
          console.log("当前路由列表:", res.data.obj.router[0].children);

          //清空之前的路由信息
          this.$router.matcher = initRouter().matcher;

          //重新添加路由信息
          this.$router.addRoutes(getRouter);

          //跳转到 Layout 组件
          this.$router.push("/");
        });

 

  (2)向后台发请求拿到权限数据,并存入VueX的state中。代码如下:

     axios
        .get(
          "https://localhost:5001/AdminApi/Access/ActionPermission?userid=" + 1
        )
        .then(res => {
          //存入权限
          console.log("权限列表:", res.data.obj);
          this.$store.commit("setAccess", res.data.obj);
        });

  (3)向后台请求数据并存入VueX中的state之前,需要清空上一次存入的数据(包括路由数据和权限数据),否则会造成数据混乱,如图:   

        

  (4)addRoutes之前,不仅要做component字段的字符串转对象的处理,还要清掉上一个用户登录后存入router中的路由数据,否则会造成数据混乱或者vue警告重复的路由名称。

  

 

 

   Login.vue组件中的全部代码如下:

<template>
  <div class="about">
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { filterAsyncRouter } from "../common/promission";
import axios from "axios";
import { initRouter } from "@/router";
export default {
  created() {
    this.$store.commit("logout");
  },

  methods: {
    login() {
      //动态生成路由
      axios
        .get("https://localhost:5001/AdminApi/Home/GetMenuJson?userid=" + 1)
        .then(res => {
          //取出路由列表 (isRoute=1)
          res.data.obj.router[0].children = res.data.obj.router[0].children.filter(
            a => a.meta.isRoute == 1 //isRoute=1的
          );

          //存入缓存
          this.$store.commit("setRoutes", res.data.obj.router);

          //转换组件对象
          var getRouter = filterAsyncRouter(res.data.obj.router);

          //打印当前路由列表
          console.log("当前路由列表:", res.data.obj.router[0].children);

          //清空之前的路由信息
          this.$router.matcher = initRouter().matcher;

          //重新添加路由信息
          this.$router.addRoutes(getRouter);

          //跳转到 Layout 组件
          this.$router.push("/");
        });

      axios
        .get(
          "https://localhost:5001/AdminApi/Access/ActionPermission?userid=" + 1
        )
        .then(res => {
          //存入权限
          console.log("权限列表:", res.data.obj);
          this.$store.commit("setAccess", res.data.obj);
        });
    }
  }
};
</script>

  promiss.js代码如下:

const _import = require('@/router/_import_' + process.env.NODE_ENV) //获取组件的方法
/**将router的json字符串中的component转换为组件对象 */
export function filterAsyncRouter(asyncRouterMap) {
  if (!asyncRouterMap) return [];

  function _iter(before) {
    const after = Object.assign({}, before)
    if (after.component) {
      after.component = _import(after.component);
    }
    if (after.children && after.children.length) {
      after.children = filterAsyncRouter(after.children);
    }
    return after
  }

  return asyncRouterMap.map(_iter)

}

  store.js代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    routes: [],
  },
  mutations: {
    setRoutes: (state, routes) => {
      state.routes = routes
    },
    setAccess: (state, access) => {
      state.access = access;
    },
    logout: (state) => {
      state.routes = [];
      state.access = []
    }
  },
  actions: {},
  modules: {},
  plugins: [new VuexPersistence().plugin]
})

 

  2. 菜单。将Layout组件用作菜显示组件,将ele中的菜单组件复制到该组件中,并通过向后台请求数据,拿到菜单和菜单对应的分组数据 。拿到菜单和菜单分组数据后,循环遍历,将菜单按照对应的分组全部显示(后台判断当前用户可显示的菜单,没有权限的菜单直接不返给前台)。vue代码以及后台数据如下:

  

<template>
  <el-container>
    <el-header>
      <el-dropdown>
        <i class="el-icon-setting"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-menu @select="handleSelect">
          <el-submenu :index="group.name" v-for="group in groupList" :key="group.id">
            <template slot="title">
              <i class="el-icon-message"></i>
              {{group.title}}
            </template>
            <template v-for="router in routerList">
              <el-menu-item
                :index="router.path"
                :key="router.meta.id"
                v-if="router.meta.groupId == group.id"
              >{{router.meta.title}}</el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeIndex: "/home/Index",
      groupList: [],
      routerList: []
    };
  },
  mounted() {
    this.getGroupList();
    this.getRouterList();
  },
  methods: {
    //菜单点击事件
    handleSelect(key) {
      this.$router.push(key);
    },
    //获取菜单分组数据
    getGroupList() {
      var that = this;
      axios
        .get("https://localhost:5001/AdminApi/Home/GetGroupJson")
        .then(res => {
          that.groupList = res.data.obj;
        });
    },
    //获取菜单数据
    getRouterList() {
      var that = this;
      axios
        .get("https://localhost:5001/AdminApi/Home/GetMenuJson")
        .then(res => {
          that.routerList = res.data.obj.router[0].children.filter(
            a => a.meta.display == 1 //取display=1的
          );
          console.log("当前菜单列表");
          console.log(that.routerList);
        });
    }
  }
};
</script>

<style>
@import "../styles/layout.css"; /*引入公共样式*/
</style>

后台分组数据:

{
"id": 14,
"name": "Customer",
"title": "客户中心",
"target": "mainRigh",
"url": "#",
"icoCss": "layui-icon-username",
"delFlag": 0,
"sortNo": 0,
"createMan": 1,
"createTime": "2019-05-05T11:30:06"
},
{
"id": 9,
"name": "System",
"title": "系统设置",
"target": "123",
"url": "#",
"icoCss": "fa-gears",
"delFlag": 0,
"sortNo": 1,
"createMan": 1,
"createTime": "2019-05-05T11:29:56"
}

后台菜单数据:

 

 

效果图:

  3.  功能页面的处理。

    (1)组件的动态加载规则。 由于该vue项目中的组件是动态加载,那么后台返回的路由数据中的component字段中的路径自然也要按照某一种规则来返给前端。否则会造成import()组件的时候,由于地址不对解析加载不到组件而报错。

   例如笔者是按照这种规则:

       后台数据

 

 

 斜杠”/“前边表示文件夹名称,后边表示组件名称,这样就可以按照这种规则动态加载到组件了。

 

 

 

 (2).页面刷新变成空白页?(路由丢失)

  遇到这个问题的话,在main.js中加入一段代码,每次刷新页面都把存入VueX state中的数据拿出来,判断一下路由里边还存不存在当前刷新页面的路由,如果没有,则对VueRouters重新赋值

  main.js 代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './common/store'
import {
  filterAsyncRouter
} from "./common/promission";

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    // 缓存的路由信息
    const routes = this.$store.state.routes
    // 判断当前路由是否被清除
    const hasRoute = this.$router.options.routes.some(r => r.name == 'index')
    // 如果 缓存中有路由信息 并且 当前路由被清除
    if (routes.length && !hasRoute) {
      //获取路由Json字符串
      var getRouter = filterAsyncRouter(routes);
      // 再次添加路由信息
      this.$router.addRoutes(getRouter);
      // 然后强制更新当前组件
      this.$forceUpdate()
    }
  },
}).$mount('#app')

  (3)  页面按钮的控制

  将前面存入vuex state中的权限数据,在每个组件中都拿出来一下存入一个变量中,在按钮上使用v-if、array.indexOf('权限名称')来控制显示/隐藏。

  原理是如果用户存在该权限,则v-if=”true“,按钮则显示,否则按钮隐藏。

  代码如下:

<el-button
          @click="edit(scope.row)"
          type="text"
          size="small"
          v-if="accessList.indexOf('SysRole/AddEdit')>-1"
        >编辑</el-button>

  

 

 效果图:

 

好了,笔者就介绍到这里。当然,如果要做一个完整的后台,肯定还有很多要做的东西,比如用户角色啊、角色授权啊等等;但笔者这次学习的重点是VUE的动态路由、动态权限,以及页面处理中一些比较常见的坑,所以别的就不多介绍了。

如有需要,朋友们可以联系我,大家多多交流。

加载全部内容

相关教程
猜你喜欢
用户评论