vue实现登录权限

Vue 实现登录权限方案

路由守卫控制访问权限

安装vue-router并配置路由守卫，在全局前置守卫中检查用户登录状态和权限。未登录用户访问受限路由时重定向到登录页。

// router.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

动态路由配置

根据用户角色动态添加路由，不同权限用户看到不同的菜单结构。后端返回用户权限列表后，通过router.addRoutes添加对应路由。

// 过滤有权限的路由
const filterRoutes = (routes, roles) => {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

Token验证机制

登录成功后将JWT token存储到localStorage或Vuex中，后续请求通过axios拦截器自动携带token。

// axios拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

权限指令控制

创建自定义指令v-permission，控制页面元素的显示隐藏，实现按钮级权限控制。

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    const permissions = store.getters.permissions
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

状态管理集成

使用Vuex集中管理用户登录状态和权限信息，提供getters方便组件获取权限数据。

// store.js
export default new Vuex.Store({
  state: {
    token: '',
    roles: []
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
    },
    SET_ROLES(state, roles) {
      state.roles = roles
    }
  }
})

服务端验证

客户端权限控制只是体验优化，必须在服务端对每个请求进行权限验证，防止恶意绕过前端检查。

权限数据持久化

用户刷新页面后需要重新获取权限数据，可通过在App.vue的created钩子中调用权限初始化方法实现。

// App.vue
created() {
  if (this.$store.state.token) {
    this.$store.dispatch('getUserInfo')
  }
}