vue后台用localStorage来保存登录账号和类型，下次进入时默认展示该类型

~犇犇~

已于 2022-05-10 10:15:45 修改

阅读量765

点赞数

文章标签：前端 elementui vue.js

于 2022-05-07 11:19:38 首次发布

本文链接：https://blog.csdn.net/qq_29124867/article/details/124626859

版权

本文介绍了如何在前端实现权限管理页面的权限类型切换并持久化存储，包括初始化页面展示功能权限、切换至数据权限以及在用户再次进入时恢复上次选择。通过localStorage存储用户信息和权限类型，确保页面加载时正确显示用户上次选定的权限数据。

摘要由CSDN通过智能技术生成

需求如下：

初始化页面默认展示功能权限；可切换至数据权限，一旦切换完成，则下次进入该页面，则展示最后一次该页面展示的权限类型数据
例如：初始化展示功能权限数据，后切换成了数据权限，之后退出系统或切换其他菜单操作，后又进入权限管理页面，则默认展示数据权限数据

1、获取登录账号

import {getStore} from '@/utils/store'

computed:{
    userInfo(){
      return getStore({name: 'userInfo'})
    },
   },

2、切换类型时定义方法，并且把用户名和类型值存储到浏览器

//切换权限类型
    handleChange(val){
      let saveType={
        userInfo:this.userInfo.userName,
        perType:val
      }
      localStorage.setItem('saveType',JSON.stringify(saveType))
    },

3、在页面加载创建时判断是否是改用户，给类型赋值

 created() {

    let localSto=JSON.parse(localStorage.getItem('saveType'))
    if(localSto && localSto.userInfo==this.userInfo.userName){
       this.searchForm.perType=localSto.perType
    }
    else{
      this.searchForm.perType='1'
    }

  }

二、当需要同时记录权限类型（el-select）和应用（el-select）的时候，则需要改变下代码,否则切换多次时另一个会为空


methods:{
//切换权限类型
    handleChange(val){
      this.perTypeSave=val;
      this.getList2()
    },

    //切换应用
    handleChangeMdcKey(val){
      this.mdcKeySave=val;
      this.getList2()
    },

    //点击查询按钮
    getList2(){
      let saveType={
        userInfo:this.userInfo.userName,
        perType:this.perTypeSave?this.perTypeSave:JSON.parse(localStorage.getItem('saveType')).perType,
        mdcKey:this.mdcKeySave?this.mdcKeySave:JSON.parse(localStorage.getItem('saveType')).mdcKey
      }
      localStorage.setItem('saveType',JSON.stringify(saveType))
      this.page.page=1
      this.getList()
    },
    
    //获取表格数据列表
    getList() {
      
    },
},
created() {
    let localSto=JSON.parse(localStorage.getItem('saveType'))
    if(localSto && localSto.userInfo==this.userInfo.userName){
       this.searchForm.perType=localSto.perType;
       this.searchForm.mdcKey=localSto.mdcKey
    }
    else{
      this.searchForm.perType='1'
      this.searchForm.mdcKey=''
    }
  }