Vue知识点积累

接之前的权限管理

发现刷新和点击别的组件的时候有的会出404(没权限的时候)页面,可以使用路由重置的方法进行重置,

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}

然后调用

//引入

import { resetRouter } from '@/router'


//对应的方法中调用   resetRouter()

最后再把404的路由放在路由的最后

router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加到路由表

功能权限的受控思路 如果后台的数据中带有关于权限类似的数据可以用一下的方式进行控制

Mixin(混入)的技术进行方法的注入, 创建封装这个方法

import store from '@/store'
export default {
  methods: {
    checkPermission(key) {
      const { userInfo } = store.state.user
      if (userInfo.roles.points && userInfo.roles.points.length) {
        return userInfo.roles.points.some(item => item === key)
      }
      return false
    }
  }
}

根据权限的按钮进行调用

//根据请求的数据进行调用

 <el-button :disabled="!checkPermission('POINT-USER-UPDATE')" type="text" size="small" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-button>