Vue2通过directive自定义指令实现按钮级别的权限控制 　　需求：不做路由的权限，只是要实现按钮级别的权限控制，具体实现方法，利用vue的directive自定义指令，在用户登录的时候获取当前用户的权限，处理好后端给的数据后，通过Vuex存起来。登录后，用户没有权限就删除相关节点，有权限就不处理，做到按钮级别的权限控制。具体代码如下！{mtitle title="新建auth.js"/}/* * @Author: lzx * @Date: 2021-10-18 09:01:36 * @LastEditors: lzx * @LastEditTime: 2021-12-10 15:35:28 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\auth.js */ import Vue from 'vue' // 使用自定义指令v-auth做按钮权限控制 Vue.directive('auth', { inserted (el, bindings, vnode) { const isSuperAdmin = sessionStorage.getItem('isSuperAdmin') // 这里校验，如果是系统默认的超级管理员就绕过权限校验 if (isSuperAdmin === '1') { } else { // 获取值 const authValue = bindings.value // 获取值的状态 const openOfClose = vnode.context.$store.state.auth.target[authValue] // 为true就显示，否则删除元素 !openOfClose && el.parentNode.removeChild(el) } } }){mtitle title="Vuex的配置"/}import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 当前用户权限 auth: {} }, // 获取user getters: { getUser (state) { } }, // 唯一可以修改state mutations: { updataAuth (state, auth) { state.auth = auth } }, // 异步执行mutations方法 actions: { asyncupdataAuth (context, auth) { context.commit('updataAuth', auth) } }, modules: { } }){mtitle title="main.js全局引入auth.js"/}// 全局引入自定义指令的按钮权限控制 import './util/auth'{mtitle title="登录的处理"/}登录成功->获取权限列表->处理数据->存入Vuex // 对象合并 数组转对象 const target = {} authArr.forEach(auth => { const source = JSON.parse(`{"${auth.mark}":${auth.url}}`) // 利用JSON.parse将对象,格式直接造出来 Object.assign(target, source) }) this.$store.dispatch('asyncupdataAuth', { target }){mtitle title="页面的使用"/}<el-button v-auth="'delete'"> <i class="iconfont icon-btn_shanchu"></i> 删除 </el-button>

Vue实现登陆并使用Vuex保存用户信息 Vue实现登陆并使用Vuex保存用户信息功能，直接上代码吧，注释都写的清楚！{mtitle title="主要的main.js"/}// 设置路由跳转的登陆守卫 router.beforeEach((to, from, next) => { // 先读缓存模拟登陆 const user = sessionStorage.getItem('user') const nll = null // 注销登陆 if (to.name === 'Logout') { // 清空缓存 sessionStorage.clear() // 跳转登陆 next('/login') } else if (to.name === 'Login') { // 判断是否为空--是否登陆，登陆直接跳首页 if (user !== nll) { next('/') } } else if (user === nll) { next('/login') } next() }){mtitle title="Vuex的index"/}import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 读取缓存，没有就设置空 state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : { user: { user: '' } }, // 获取user getters: { getUser (state) { return state.user } }, // 唯一可以修改state mutations: { updataUser (state, user) { state.user = user } }, // 异步执行mutations方法 actions: { asyncUpdataUser (context, user) { context.commit('updataUser', user) } }, modules: { } }){mtitle title="Login页面"/}// 所有的都验证完成，并且成功，直接执行这句话，跳转并且用Vuex保存用户  this.$store.dispatch('asyncUpdataUser', { name: formName.account }){mtitle title="App页面解决刷新后Vuex数据丢失"/}<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', components: {}, // 第一种解决Vuex刷新数据丢失 mounted () { // 全局监听刷新，刷新就执行saveState写入本地缓存 window.addEventListener('unload', this.saveState) }, methods: { saveState () { // 缓存vuex的state数据 sessionStorage.setItem('state', JSON.stringify(this.$store.state)) } } // 第二种解决Vuex刷新数据丢失，iphone使用beforeunload无效所以我没有用 // created () { // // 在页面加载时读取sessionStorage里的状态信息 // if (sessionStorage.getItem('store')) { // this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) // } // // 在页面刷新时将vuex里的信息保存到sessionStorage里 // window.addEventListener('beforeunload', () => { // sessionStorage.setItem('store', JSON.stringify(this.$store.state)) // }) // } } </script>