vue中的权限配置(菜单&路由&按钮)

前端菜单&路由&按钮权限

1. 登录后会获取到后端返回的token

2. 将token存储到sessionStorage / vuex 中

3. 登录成功后,在axios请求拦截器中添加token

main.ts文件:

   // 请求拦截添加TOKEN
   axios.interceptors.request.use((config: any) => {
     // 添加Token
     config.headers.Authorization = sessionStorage.getItem('token')
     return config
   })

4. 发送getRoutes,getMenus和getBtns请求

获取当前账号的路由、菜单和按钮信息,然后根据menus渲染菜单,将routers存到sessionStorage / vuex中
这里的routes和menus其实可以放到一个接口里面,我们是区分开了

5. 在路由前置守卫中判断route(localRoute中有的话直接to,没有就next())

main.ts文件:

 router.beforeEach((to: any, from: any, next: any) => {
        let local = sessionStorage.getItem("localRoute")
        if (local) {
            let arr = JSON.parse(local)
            let bool = arr.some((x: any) => x.route == to.href)
            if (bool || to.href == '/home') {
              //这里使用了乾坤微前端框架
                if (window.__POWERED_BY_QIANKUN__) {
                    action.setGlobalState({
                        route: to
                    })
                }
                next()
            }
        } else {
            next()
        }
    })

6. 按钮权限

也是存到sessionStorage / vuex中
然后根据后端返回的某个值进行显示隐藏

<template>
  {/* 这里的按钮功能为新增 */}
  <button v-if="btnShow('makt_baseplate_add')"></button>
</template>

    //权限函数判断按钮是否隐藏
  const btnShow = (i: string) => {
    //AuthArr就是后端返回的按钮权限
    if (AuthArr.value.includes(i)) {
      return true;
    } else {
      return false;
    }
  };

7. 补充(添加axios相应拦截器,统一处理接口中的错误)

//权限错误弹窗标识，保证此类弹窗不会同时出现多个
let roleError = false;
axios.interceptors.response.use(undefined,
    (error) => {
        if (!error.response) {
            return Promise.reject(error)
        }
        if (error.response.status == 200) {
            if (error.response.data && error.response.data.code) { return null }
        } else {
            switch (error.response.status) {
                case 401: {
                    if (roleError) break
                    Modal.destroyAll()
                    Modal.confirm({
                        title: '验证错误', content: "登录已失效，请重新登录",
                        okText: "重新登录", cancelText: "关闭", closable: true,
                        wrapClassName: "e-mes-modal-confirm",
                        onOk() {
                            roleError = false
                            sessionStorage.clear()
                            window.location.href = "/auth"
                        },
                        onCancel() {
                          roleError = false
                        },
                    })
                    roleError = true
                    break
                }
                case 403: {
                    if (roleError) break
                    Modal.destroyAll()
                    Modal.confirm({
                        title: '权限验证', content: "当前角色暂无该权限，请点击确认返回首页",
                        okText: "确认", cancelText: "关闭", closable: false,
                        wrapClassName: "e-mes-modal-confirm",
                        onOk() {
                            roleError = false
                            window.location.href = "/home"
                        },
                        onCancel() {
                          roleError = false
                        },
                    })
                    roleError = true
                    break
                }
                case 500: {
                    Modal.destroyAll()
                    Modal.confirm({
                        title: '错误', content: "服务器错误，请刷新重试",
                        okText: "刷新", closable: true,
                        wrapClassName: "e-mes-modal-confirm",
                        onOk() {
                            window.location.reload()
                        }
                    })
                    break
                }
            }
        }
        return Promise.reject(error)
    })

这里附上别人写的(登录权限),也可以参考