首页
壁纸
直播
留言
关于
友链
统计
Search
1
tampermonkey油猴和谷歌访问助手的安装---破解谷歌访问助手
13,643 阅读
2
安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)
3,211 阅读
3
编译asar文件与electron反编译
3,178 阅读
4
websocket封装带心跳和重连机制(vue3+ts+vite)
2,782 阅读
5
js一些小功能(持续更新)
2,442 阅读
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
登录
Search
标签搜索
Vue3
Vue
Axios
微信小程序
Javascript
Vuex
js
请求
request
前端
tampermonkey
Google
助手
脚本
小程序云开发
Bootstrap
壁纸
鼠标事件
跨域
css
大祥子i
累计撰写
55
篇文章
累计收到
128
条评论
首页
栏目
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
页面
壁纸
直播
留言
关于
友链
统计
搜索到
2
篇与
Vuex
的结果
2021-09-16
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>
2021年09月16日
740 阅读
0 评论
0 点赞
2021-09-15
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>
2021年09月15日
1,018 阅读
0 评论
0 点赞