一、原由

最近在做一个小项目的开入API，文档是用vuepress写的静态md并发布。因为是项目刚起步，对接的接口也会经常改动，每次改动都要修改文档感觉太麻烦，就想到用knife4j来代替。但外部使用的接口和内部使用不一样，需要一些接入引导说明，比如API接入步骤、鉴权说明…等

重新翻了knife4j的文档发现2.x版本自2.0.7之后可以使用自定义文档的功能，自定义文档正好也是我喜欢的Markdown文件，再加一个权限验证，目前是很好的解决了我的问题。

效果：

二、开始

knife4j2.x版如果想实现自定义Markdown文档需要将版本升级2.0.7及以上

本次测试使用的springboot版本 2.0.3.RELEASE

需要用到的依赖

//swagger版本支持
compile group: 'io.springfox', name: 'springfox-swagger2', version: '2.10.5'
compile group: 'io.springfox', name: 'springfox-swagger-ui', version: '2.10.5'
compile 'io.springfox:springfox-spring-webmvc:2.10.5'
//swagger注解无默认值错误忽略
compile group: 'io.swagger', name: 'swagger-annotations', version: '1.5.22'
compile group: 'io.swagger', name: 'swagger-models', version: '1.5.22'
//knife2.x版本
compile group: 'com.github.xiaoymin', name: 'knife4j-spring-boot-starter', version: '2.0.8'
//升级spring-plugin-core，否则会有冲突
compile 'org.springframework.plugin:spring-plugin-core:2.0.0.RELEASE'

SwaggerConfiguration

package com.only.oc.openapi.config;

import com.fasterxml.classmate.TypeResolver;
import com.github.xiaoymin.knife4j.spring.extension.OpenApiExtensionResolver;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Import;
import springfox.bean.validators.configuration.BeanValidatorPluginsConfiguration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc;


@Configuration
@EnableSwagger2WebMvc
@Import(BeanValidatorPluginsConfiguration.class)
public class SwaggerConfiguration {

    private final TypeResolver typeResolver;
    private final OpenApiExtensionResolver openApiExtensionResolver;

    @Autowired
    public SwaggerConfiguration(TypeResolver typeResolver, OpenApiExtensionResolver openApiExtensionResolver) {
        this.typeResolver = typeResolver;
        this.openApiExtensionResolver = openApiExtensionResolver;
    }


    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.only.oc.openapi.api"))//扫描包
                .apis(RequestHandlerSelectors.withClassAnnotation(Api.class))//扫描在API注解的contorller
                .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class))//扫描带ApiOperation注解的方法
                .paths(PathSelectors.any())
                .build()
                .extensions(openApiExtensionResolver.buildExtensions("2.X版本"));
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("昂立课堂（开放API）")
                .description("昂立课堂开放平台")
                .version("v2.x")
                .license("Apache License Version 2.0")
                .licenseUrl("https://www.apache.org/licenses/LICENSE-2.0")
                .contact(new Contact("作者", "", "xxx@qq.com"))
                .build();
    }

}

application.yml

server:
  port: 8080

knife4j:
  enable: true
  # 生产环境屏蔽
  # production: true
  # 开启Swagger的Basic认证功能,默认是false
  basic:
    enable: true
    username: only
    password: only
  documents:
    -
      group: 2.X版本
      name: 另外文档分组请看这里
      locations: classpath:markdown/*
    - group: 2.X版本
      name: 接入方法
      locations: classpath:markdown/api.md

文档结构位置

源码

https://codechina.csdn.net/leopast/knife4j-demo.git

三、坑

当你一切准备就绪时就报如下错误

这里需要升级spring核心插件

compile 'org.springframework.plugin:spring-plugin-core:2.0.0.RELEASE'

原创文章未经本人许可，不得用于商业用途及传统媒体。转载请注明出处，否则属于侵权行为，谢谢合作！

实现思路

1.页面展示需要鉴权的所有按钮，需要先鉴权菜单权限的显示与隐藏。

2.勾选每个角色或者用户所能看的权限保存在数据库。该权限数据是一个权限字段的数组。

3.全局自定义指令（directive）控制按钮权限数据的方法，登入时获取后端传来的按钮权限数组。

4.在每个按钮中调用该指令，并传入该操作的权限字段和后端保存的权限字段进行匹配，能匹配则该操作按钮可显示

具体代码如下

1. 获取登录用户所有权限

// 获取权限菜单(存在store下modules下user.js的actions中)
 getMenuTree ({ commit, state }) {
   return new Promise((resolve, reject) => {
     getMenuTree(state.token).then(response => {
       const data = response.result
       if (!data) {
         reject('验证失败，请重新登录')
       }
       // 存菜单结构
       commit('SET_ROLES', data)
       // 重置按钮权限
       btns = []
       const btn = findAllBtn(data)
       // 存所有按钮权限
       commit('SET_BUTTONS', btn)
       resolve(data)
     }).catch(error => {
       reject(error)
     })
   })
 }
// 递归获取按钮list
let btns = []
export function findAllBtn (list) {
 list.forEach(val => {
 // 与后台协商所有菜单资源（resCode)下的type是1表菜单，2为按钮
   if (val.type === '1') {
     if (val.children && val.children.length > 0) {
       findAllBtn(val.children)
     }
   } else {
     btns.push(val.reCode)
   }
 })
}

2. 对比菜单权限的方法

在store下modules下新建一个permission.js(获取最终动态权限菜单）
/**
* @param  {Array} userRouter 后台返回的用户权限json
* @param  {Array} allRouter  前端配置好的所有动态路由的集合
* @return {Array} realRoutes 过滤后的路由
*/
export function recursionRouter (userRouter = [], allRouter = []) {
 let realRoutes = []
 allRouter.forEach(val => {
   userRouter.forEach(item => {
     if (val.path.includes('/')) {
       if (item.resCode === val.path.split('/')[1]) {
         val.children = recursionRouter(item.children, val.children)
         realRoutes.push(val)
       }
     } else {
       if (item.resCode === val.path) {
         if (item.children && item.children.length > 0) {
           val.children = recursionRouter(item.children, val.children)
         }
         realRoutes.push(val)
       }
     }
   })
 })
 realRoutes.push({ path: '*', redirect: '/404', isShow: true })
 // console.log(222, realRoutes)
 return realRoutes
}
// asyncRouterMap本地配置好的所有动态路由的集合
const actions = {
 generateRoutes ({ commit }, roles) {
   return new Promise(resolve => {
     let accessedRoutes = recursionRouter(roles, [...asyncRouterMap])
     commit('SET_ROUTES', accessedRoutes)
     resolve(accessedRoutes)
   })
 }
}

对比菜单权限需要在全局路由守卫中如下操作

router.beforeEach(async (to, from, next) => {
 // 确定用户是否已登录
 const hasToken = getToken()
 // 判断是否有token
 if (hasToken) {
   // 运营端登录
   if (to.path === '/login') {
     // 如果已登录，则重定向到主页
     next({ path: '/' })
     NProgress.done()
   } else {
     // 确定用户是否已获得了他的权限角色
     const hasRoles = store.getters.roles && store.getters.roles.length > 0
     if (hasRoles) {
       next()
     } else {
       // 角色必须是对象数组
       const roles = await store.dispatch('user/getMenuTree')
         // 根据角色生成可访问路由映射
         const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
         // 清空静态路由
         resetRouter()
         // 动态添加可访问路由
         router.addRoutes(accessRoutes)
         // hack 方法，以确保addRoutes是完整的
         // 设置replace: true，这样导航就不会留下历史记录
         next({ ...to, replace: true })
     }
   }
 } else {
   // 在免登录白名单，直接进入
   if (whiteList.indexOf(to.path) !== -1) {
     next()
   } else {
     // 没有访问权限的其他页面被重定向到登录页面
     next(`/login?redirect=${to.path}`)
     NProgress.done()
   }
 }
})

3. 全局自定义指令

// 需要全局注入（即在main.js引入）
import Vue from 'vue'
import store from '@/store'
/**
 * 使用：v-permission="'resCode'"
 *   resCode 按钮资源（即路由path）
 * **/
Vue.directive('permission', {
  inserted (el, vDir) {
    let btnPermission = store.getters.buttons
    if (vDir.value) {
      if (!btnPermission.includes(vDir.value)) {
        el.parentNode.removeChild(el)
      }
    }
  }
})

4. 页面中使用

<el-button type="primary" @click="roleExport" v-permission="'ent-role-export'">导出</el-button>

如图

初始
取消权限后

相关文章

基于elementUI中table组件二次封装（Vue项目）

axios二次封装，接口统一存放,满足RESTful风格

keep-alive不能缓存多层级路由(vue-router)菜单问题解决

基于ElementUi再次封装基础组件文档

前言

从今年3月到现在入门前端也已经有两个月了，这两个月在自学的过程中遇到了许多问题也解决了其中一部分，但是现在才开始意识到把学习过程的问题整理到CSDN上。最近老师布置了基于Vue的权限控制，网上查阅了许多博客，例如“前端路上":这篇文章提到了Vue2.0以上使用的addRoutes增加动态路由的思路。然而我只是一个小白，尽管文章里贴出了源码，我也只能看的一知半解，所以根据文章中提供的思路自己写了一个小测试demo。

目录结构

准备工作

在路由配置文件里写上两个路由表，一个静态路由表（所有权限用户均能访问如“登录”、“404页”）和一个动态路由表，默认导出静态路由。

const router = new Router({ //静态路由，登录、404
  mode:'history',
  routes: [
    {
      path: '/login', //登录页
      name: 'login',
      component: (resolve) => require(['../components/login.vue'], resolve)
    },
    {
      path: '/404',  //404页
      name: 'err',
      component: (resolve) => require(['../components/err.vue'], resolve)
    },
  ]
});
export default router //默认静态路由

export const dynamicRouter =[ //动态路由
  {
    path: '/',
    name: 'home',
    meta: {  //添加meta标签，里面自定义了roles，用来设置权限
      roles:['admin','user']  //该路由仅admin和user权限访问
    },
    component: (resolve) => require(['../components/home.vue'], resolve)
  },
  {
    path: '/',
    name: 'home2',
    meta: {
      roles:['tourist'] //该路由仅tourist权限访问
    },
    component: (resolve) => require(['../components/home2.vue'], resolve)
  },
  {
    path: '/home21',
    name: 'home21',
    meta: {
      roles:['user']
    },
    component: (resolve) => require(['../components/home21.vue'], resolve)
  },
  {
    path: '/home11',
    name: 'home11',
    meta: {
      roles:['admin']
    },
    component: (resolve) => require(['../components/home11.vue'], resolve)
  },
];

这里我们已经配置好了路由表。

思路

如果用户没有登录，那就将页面重定向到“/login”，实现方法：在跟组件（App.vue）的created回调里做判断

methods:{
    judgelogin(){ //methods写一个判断是否登录的方法
      let isLogin = store.state.token; //这里我们从Vuex里取出token，因为登录请求成功后我们会将后台返回的token存储在vuex里方便使用
      if(!isLogin){ //如果没有token，那就代表用户没有登录
        return this.$router.push('/login'); //重定向到login页
      } 
    }
  },
created() {
     this.judgelogin(); //在created里调用上面构造的方法
  }

登录页：

HTML：

template>
  <div id="login">
    <form>
      <label>账号</label><input type="text" v-model="username"/><br>
      <label>密码</label><input type="password" v-model="password"/><br>
      <input type="button" value="登录" @click="Login">
    </form>
  </div>
</template>

JS:

import {router,dynamicRouter} from '../router/index' //获取路由配置文件里的两个路由表

export default {
  name: 'login',
  data () {
    return {
      username:'', //双向绑定获取账号
      password:'', //双向绑定获取密码
    }
  },
  methods:{
    Login(){
      sessionStorage.setItem('token',this.username); //将token和roles保存下来，因为没有后台接口，我这边就将账号当做token和roles
      sessionStorage.setItem('roles',this.username);
      let dR = new Array(); //创建一个数组用来存储符合权限的路由
      for (let i=0;i<dynamicRouter.length;i++){ //第一层循环遍历动态路由表的每一个路由
        for (let j=0;j<dynamicRouter[i].meta.roles.length;j++){ //第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较
          if (dynamicRouter[i].meta.roles[j] == this.username){ //这里因为我默认账号名就是当前用户的权限
           dR.push(dynamicRouter[i]); //符合条件的路由信息就放进数组里
         }
        }
      }
      this.$router.addRoutes(dR.concat([{ //这里调用addRoutes方法，动态添加符合条件的路由
        path: '*',
        redirect: '/404' //所有不匹配路径(*)都重定向到404，为什么写在这里而不放到静态路由表里可以查看“前端路上”的文章
      }]));
      this.$router.push('/'); //登录验证后跳转到主页"/"
    }
  },
  created(){
    sessionStorage.clear(); 
  }
}

到这里我们用账号“admin”登录后就可以成功跳转到主页并显示"home.vue"的内容，我们也可以修改url访问"/home11"。但是当我们访问"/home2"和"/home21"的时候没有出现我们预期的跳转到"/404"页，这里出了一个bug不知道为什么，希望用大神能够指正出来，小弟感激不尽！

前方有坑：

登陆后，当我们按"F5"键刷新页面后，页面内容都消失不见了(理论上应该是/404页内容)。原来addRoutes和Vuex一样都是刷新后数据会清空(这个地方我感觉是真的坑)。这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，也就是前面的静态路由表。

改进：

在根组件的created回调里，我们不仅得判断用户是未登录状态还是登陆后又刷新，改进代码如下

judgeLogin(){
      let isLogin = store.state.token;
      if(!isLogin){
        return this.$router.push('/login');
      } else {
        let dR = new Array();
        for (let i=0;i<dynamicRouter.length;i++){
          for (let j=0;j<dynamicRouter[i].meta.roles.length;j++){
            if (dynamicRouter[i].meta.roles[j] == store.state.roles){
              dR.push(dynamicRouter[i]);
            }
          }
        }
        this.$router.addRoutes(dR);
      }
    }

这样即使刷新，你生成的动态路由也不会失效了。

附上：

因为是小测试，所以Vuex里只存了两个数据：

export default new Vuex.Store({
  state:{
    token:sessionStorage.getItem('token'), 
    roles:sessionStorage.getItem('roles'),
  },
})

结：

第一次写博客还是有点激动的，不知道这个权限控制思路能不能对大家有所帮助。这样的权限控制其实分不同权限写了几套页面，然后根据权限动态添加符合权限的页面。其实我一开始的设想是一个主页的菜单栏根据不同权限的用户显示不同的导航(这个实现效果看“前端路上”大能分享的github上源码)，但是技术有限还未能实现，后续实现后会贴出来的。