前端权限控制：接口、路由、按钮

前端权限控制：接口权限、路由权限、按钮权限。

一、接口权限控制

接口权限控制通常通过JWT（JSON Web Token）实现。后端生成Token，前端拿到token后进行存储，在每次请求时通过请求头的Authorization字段发送给后端进行验证。

// 请求拦截
axios.interceptors.request.use(
  config => {
    config.headers['Authorization'] = localStorage.getItem('token')
    return config
  },
  error => {
    return Promise.reject(JSON.stringify({ msg: error.toString(), ...error }))
  }
)

// 响应拦截
axios.interceptors.response.use(
(res)=>res,
({response}) => {
    if(response.status === 401) {
        // 未认证，跳转到登录页
        ruter.push('/login)
    } else if(response.status === 403) {
        // 没有访问权限
        router.push('/login')
    }
)

二、路由权限控制

不同用户根据角色权限访问不同的页面或功能模块。

实现思路:

• 用户登录成功后，根据用户角色或权限，返回一份包含该用户可以访问的路由表的JSON数据。
• 前端接收路由配置
• 前端匹配对应的路由，通过vuerouter动态添加路由

const componentMap = {
    Dashboardcomponent:()=>import('@/views/Dashboard.vue'),
    ProfileComponent:()=>import('@/views/Profile.vue')
}

// 动态生成并注册路由
async function createAppRouter(){
    const routeData = await fetchRoutes()// 调接囗获取后端返回的路由表
    // 根据路由数据生成 Vue Router 路由配置
    const routes =routeData.map((route)=>({
        path: route.path,
        name: route.name,
        component:componentMap[route.component]，//动态加载组件
    }))
    //创建 Vue Router 实例
    const router =createRouter({
        history: createWebHistory(),
        routes:[]，// 初始路由为空
    })
}

三、按钮权限控制

• 用户登录成功后，根据用户角色或权限，返回一份包含该用户可以访问的按钮权限的数据。
• 前端通过自定义指令来控制按钮是否显示。

function checkPermission(el, binding) {
  const { arg } = binding
  const permissionList = store.getters && store.getters.permissionList
  if (arg) {
    if (!permissionList.includes(arg)) {
      console.log(el.parentNode, el, el.parentNode && el.parentNode.removeChild(el))
      el.parentNode && el.parentNode.removeChild(el)
    }
  } else {
    throw new Error(`need permission! Like v-per:btn:add:customer`)
  }
}

app.directive('auth', {
    mounted(el, binding) {
      checkPermission(el, binding)
    },
    update(el, binding) {
      checkPermission(el, binding)
    }
  })