vue2鉴权处理

路由鉴权

1.定义路由表：

在router/index.js文件中使用router.beforeEach函数创建全局前置守卫来进行路由鉴权

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true } // 添加 meta 字段，用于鉴权判断
    }
  ]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = // 进行鉴权判断的逻辑，比如判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (isAuthenticated) {
      next() // 已经登录，放行
    } else {
      next('/login') // 未登录，跳转到登录页面
    }
  } else {
    next() // 不需要鉴权的路由，直接放行
  }
})

export default router

• 在路由表中设置鉴权字段：在路由表中为需要进行鉴权的路由配置一个meta字段，并将其值设置为{ requiresAuth: true }。为true的时候必须做鉴权处理

• 编写鉴权逻辑：在全局前置守卫中，你需要编写实际的鉴权逻辑。可以根据具体业务需求进行判断，比如判断用户是否已登录、是否具有特定的角色权限等。如果用户已经登录，则调用next()放行；否则，可以通过调用next('/login')跳转到登录页面。

• 使用路由表：在Vue组件中，你可以使用Vue Router提供的<router-link>标签和$router API来进行路由导航。<router-link>用于生成一个带有路由路径的链接，$router.push()用于编程式导航到指定的路由。

1. <!-- 在模板中使用 <router-link> 进行路由导航 -->
   <router-link to="/dashboard">Dashboard</router-link>
   
   
   
   
   // 在组件中使用 $router 进行编程式导航
   methods: {
     goToDashboard() {
       this.$router.push('/dashboard')
     }
   }

   退出登录时刷新页面

   防止在超级管理员退出登录的时候普通员工登录可以暂时性访问超级管理员页面

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
</el-dropdown-menu>
 
//handleCommand为点击事件触发的方法
methods: {
 handleCommand(command) {
 if (command === "loginOut") {
        //切换账号
        localStorage.clear();
        this.$router.push("/login");
        //刷新页面 解决addRoues的bug
        this.$router.go(0);
      }
    }
}

按钮鉴权

1.

根据鉴权字段为true的时候显示按钮并且可以进行操作逻辑

从本地存储获取权限数据，并对按钮v-if设置权限

为true的权限可以使用，includes(role)判断mate字段中的requiresAuth是否为true

1. 将判断语句放在计算属性中，以便在role变化时自动更新判断结果：

```javascript
export default {
  computed: {
    requiresAuth() {
      const role = localStorage.getItem("role");
      return role === "requiresAuth";
    }
  }
}
```

2. 在模板中直接使用计算属性的结果进行条件渲染：

```html
<el-button v-if="requiresAuth" type="text"></el-button>
```

这样，每当localStorage中的role发生变化时，requiresAuth会自动重新计算，并根据计算结果显示或隐藏el-button。