关于vue 版本的ant design pro 如何保留token验证去掉其他权限验证

如何在ant design vue pro 原有的登陆权限的基础上保留token验证而去掉其他权限验证

第一步:在src/main.js中注释掉mock.js

// with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import { VueAxios } from './utils/request'

// mock
// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
// import './mock'
  

import bootstrap from './core/bootstrap'
import './core/lazy_use'
import './permission' // permission control
import './utils/filter' // global filter
import './components/global.less'
import { Dialog } from '@/components'
import { Timeline } from 'ant-design-vue';
import { FormModel } from 'ant-design-vue';

Vue.config.productionTip = false

// mount axios Vue.$http and this.$http
Vue.use(VueAxios)
Vue.use(Timeline)
Vue.use(Dialog)
Vue.use(FormModel)

new Vue({
  router,
  store,
  created: bootstrap,
  render: h => h(App)
}).$mount('#app')

第二步:在src\layouts\BasicLayout.vue中

import { asyncRouterMap } from '@/config/router.config.js'

在created钩子函数中做以下修改

created () {
    this.menus = asyncRouterMap.find((item) => item.path === '/').children
    this.collapsed = !this.sidebarOpened
}

第三步:在 src/router/index.js中做以下修改

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap, asyncRouterMap } from '@/config/router.config'

const originalPush = Router.prototype.push
Router.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})

第四步:在src\permission.js中注释以下代码,在注释代码的地方添加next()

next()
      // if (store.getters.roles.length === 0) {
      //   store
      //     .dispatch('GetInfo')
      //     .then(res => {
      //       const roles = res.result && res.result.role
      //       store.dispatch('GenerateRoutes', { roles }).then(() => {
      //         // 根据roles权限生成可访问的路由表
      //         // 动态添加可访问路由表
      //         router.addRoutes(store.getters.addRouters)
      //         // 请求带有 redirect 重定向时,登录自动重定向到该地址
      //         const redirect = decodeURIComponent(from.query.redirect || to.path)
      //         if (to.path === redirect) {
      //           // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
      //           next({ ...to, replace: true })
      //         } else {
      //           // 跳转到目的路由
      //           next({ path: redirect })
      //         }
      //       })
      //     })
      //     .catch(() => {
      //       notification.error({
      //         message: '错误',
      //         description: '请求用户信息失败,请重试'
      //       })
      //       store.dispatch('Logout').then(() => {
      //         next({ path: '/user/login', query: { redirect: to.fullPath } })
      //       })
      //     })
      // } else {
      //   next()
      // }

具体过程请到https://github.com/vueComponent/ant-design-vue-pro/issues/76查看

猜你喜欢

转载自blog.csdn.net/Z_J_CSDN/article/details/107808694
今日推荐