vue2人力资源项目3主页

news2025/1/12 12:07:25

主页权限验证

前置守卫开启进度条，后置守卫关闭进度条

import router from '@/router'
import nProgress from 'nprogress'// 导入进度条（模板自带）
import 'nprogress/nprogress.css'// 导入进度条样式（模板自带）
// 前置守卫
// 到哪里，去哪里，做什么
router.beforeEach((to, from, next) => {
  // 开启进度条
  nProgress.start()
})

// 后置守卫
router.afterEach(() => {
  // 关闭进度条
  nProgress.done()
})

如果有token，如果跳转登录页面情况

// 前置守卫
// 到哪里，去哪里，做什么
router.beforeEach((to, from, next) => {
  // 开启进度条
  nProgress.start()
  if (// 存在token
    store.getters.token) {
    if (to.path === '/login') {
      // 跳转首页
      next('/')
    } else {
      next()// 到其他页面，放行
    }
  } else {
    // 没有token
    next()
  }
})

没有token

声明白名单

// 声明白名单
const whiteList = ['/login', '404']
// 到哪里，去哪里，做什么
router.beforeEach((to, from, next) => {
  // 开启进度条
  nProgress.start()
  if (// 存在token
    store.getters.token) {
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next（地址）并没有执行后置守卫
      nProgress.done()
    } else {
      next()// 到其他页面，放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nProgress.done()
    }
  }
})

总结

登录后获取用户资料

index.vue里有token的前提下调用action异步方法

  created() {
    // 调用action
    this.$store.dispatch('user/getUserInfo')
  }
}

store/user.js里存放action

1.先导入接口，并声明一个对象来存储用户基本资料状态

import { login,getUserInfo } from '@/api/user'
// 用来存放数据
const state = {
  token: getToken(),// 调用加括号,从缓存中读取初始值
  userInfo:{}//声明一个对象来存储用户基本资料状态
}

2.利用mutations修改userInfo的值

// 用来修改数据,要修改state里的数据，必须通过mutations
const mutations = {
  setToken(state, token) {
    state.token = token
    // 同步到缓存
    setToken(token)
  },
  removeToken() {
    // 删除vuex的token
    state.token = null
    removeToken()
  },
  setUserInfo(state,userInfo){
    state.userInfo = userInfo
  }
}

3.actions调用接口，获取数据并通过context提交给mutation

const actions = {
  // context上下文，传入参数
  async login(context, data) {
    console.log(data)
    // 点击调用登录接口，成功执行await后的内容
    const token = await login(data)
    // 提交mutations里的数据，调用context里的默认方法
    context.commit('setToken', token)
  },
  // action
  async getUserInfo(context) {
    // 获取接口信息
    const result = await getUserInfo()
    context.commit('setUserInfo', result)
  }
}

api/user.js里封装接口

export function getUserInfo() {
  return request({
    url: '/sys/profile'
  })
}

调整action位置

getter.js里封装userId

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  userId: state => state.user.userInfo.userId,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

permission.js

   if (!store.getters.userId) { await store.dispatch('user/getUserInfo') }
      next()// 到其他页面，放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nProgress.done()
    }
  }

显示用户头像、名称

根据传过来的数据显示头像和名称

1.通过getters向外暴露用户头像和信息

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  userId: state => state.user.userInfo.userId,
  avatar: state => state.user.userInfo.avatar, // 用户头像
  name: state => state.user.userInfo.name// 用户名称
}
export default getters

2.找组件

先引入

import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

export default {
 computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  }

使用

    <!--头像-->
          <img :src="avatar" class="user-avatar">
          <!--用户名称-->
          <span>{{ name }}</span>

调整样式

 .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        display: flex;
        align-items: center;
        .name{
margin-right: 10px;
font-size: 16px;
      }
      .el-icon-setting{
font-size: 20px;
      }

处理用户头像为空

1.v-if 和v-else

2.设置样式

 .username{
        width: 30px;
        height: 30px;
        line-height: 30px;
        align-items: center;
        background-color: aqua;
        color: #fff;
        border-radius: 50%;
        margin-right: 4px;
      }

3.当用户姓名为空时，使用可选链（需要升级版本）

处理token失效

store/user.js声明一个提出登录的actions

logout(context) {
    context.commit('removeToken')
    // 调用setUserInfo，传进去空对象，以清除用户信息
    context.commit('setUserInfo', {})
  }

request.js跳转

if (error.response.status === '401') {
    Message({ type: 'warning', message: 'token超时' })
    store.dispatch('user/logout')// 调用action退出登录
    // 主动跳转到登录页
    router.push('/login')
    return Promise.reject(error)
  }
  Message({ type: 'error', message: error.message })
  return Promise.reject(error)

退出登录

async logout() {
      this.$store.dispatch('user/logout')
      this.$router.push('/login')
    }

显示修改密码弹层

 <!--放置dialog-->
  <!--.sync,可以接收子组件传过来的事情和值-->
  <el-dialog width="500px" title="修改密码" :visible.sync="showDialog">
    <el-form />
  </el-dialog>

表单结构

   <el-dialog width="500px" title="修改密码" :visible.sync="showDialog">
      <!--放置表单-->
      <el-form label-width="120px">
        <el-from-item label="旧密码">
          <el-input show-password size="small" />
        </el-from-item>
        <el-from-item label="新密码">
          <el-input show-password size="small" />
        </el-from-item>
        <el-from-item label="重置密码">
          <el-input show-password size="small" />
        </el-from-item>
        <el-form-item>
          <el-button type="primary" size="mini">确认</el-button>
          <el-button size="mini">取消</el-button>
        </el-form-item></el-form>
    </el-dialog>

表单校验（prop与rules有关，v-model与数据绑定有关）

   <el-dialog width="500px" title="修改密码" :visible.sync="showDialog">
      <!--放置表单-->
      <el-form ref="passForm" label-width="120px" :rules="rules" :model="passForm">
        <el-from-item label="旧密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword" show-password size="small" />
        </el-from-item>
        <el-from-item label="新密码" prop="newPassword">
          <el-input v-model="passForm.newPassword" show-password size="small" />
        </el-from-item>
        <el-from-item label="重置密码" prop="confirmPassword">
          <el-input v-model="passForm.confirmPassword" show-password size="small" />
        </el-from-item>
        <el-form-item>
          <el-button type="primary" size="mini">确认</el-button>
          <el-button size="mini">取消</el-button>
        </el-form-item></el-form>
    </el-dialog>

变量准备（rules在data里）

data() {
    return {
      showDialog: false,
      passForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [],
        newPassword: [],
        confirmPassword: []
      }
    }
  },

校验规则

判断两次密码是否相同：用了自定义校验，注：必须使用箭头函数，否则this不能指向组件实例

rules: {
        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }], // 旧密码
        newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          min: 6,
          max: 16,
          message: '新密码的长度为6-16位之间'
        }], // 新密码
        confirmPassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          validator: (rule, value, callback) => {
            // value
            if (this.passForm.newPassword === value) {
              callback()
            } else {
              callback(new Error('重复密码和新密码输入不一致'))
            }
          }
        }] // 确认密码字段
      }
    }
  },

总结

确认按钮

先绑定事件，之后调用接口（传参时就多不就少，注意async）

 btnOk() {
      this.$refs.passForm.validator(async(isOk) => {
        if (isOk) {
          // 调用接口
          // 传收集来的值
          await updatePassword(this.passForm)
          // 成功后执行重置表单，不成功不用管
          this.$refs.passForm.resetFields()
          // 关闭弹层
          this.showDialog = false
        }
      })
    }

优化：

this.$refs.passForm.resetFields()

      // 关闭弹层

      this.showDialog = false

这两句代码与关闭按钮的一致，所以直接调用关闭按钮

btnOk() {
      this.$refs.passForm.validator(async(isOk) => {
        if (isOk) {
          // 调用接口
          // 传收集来的值
          await updatePassword(this.passForm)
          // 成功后执行重置表单，不成功不用管
          this.$refs.passForm.resetFields()
          // 关闭弹层
          // this.showDialog = false
          // this.$message.success('修改成功')
          this.btnCancel()
        }
      })
    }

总结

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1641660.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

java中对文件的基本操作

java中对文件的基本操作

文件IO 文件IO。啥叫文件的IO&#xff1f; 他就是指&#xff1a;1.Input&#xff08;输入&#xff09;2.Output&#xff08;输出&#xff09;。 比如&#xff0c;我们的电脑可以从网络中下载文件&#xff0c;也可以通过网络上传文件等等很多的例子&#xff0c;都体现了输入和…
阅读更多...
Xamarin.Android项目使用ConstraintLayout约束布局

Xamarin.Android项目使用ConstraintLayout约束布局

Xamarin.AndroidX.ConstraintLayout Xamarin.Android.Support.Constraint.Layout Xamarin.AndroidX.ConstraintLayout.Solver Xamarin.AndroidX.DataBinding.ViewBinding Xamarin.AndroidX.Legacy.Support.Core.UI Xamarin.AndroidX.Lifecycle.LiveData ![在这里插入图片描述]…
阅读更多...
android天气实战

android天气实战

页面绘制 问题1、下拉框需要背景为透明 我懒得写全部省份就写了5个所以不需要往下 图标准备 iconfont-阿里巴巴矢量图标库几坤年没来这了好怀念啊&#xff0c;图标库选择下雨的图标等 准备网络请求 0、API接口准备 api免费七日天气接口API 未来一周天气预报api (tianqiap…
阅读更多...
SVM直观理解

SVM直观理解

https://tangshusen.me/2018/10/27/SVM/ https://www.bilibili.com/video/BV16T4y1y7qj/?spm_id_from333.337.search-card.all.click&vd_source8272bd48fee17396a4a1746c256ab0ae SVM是什么? 先来看看维基百科上对SVM的定义: 支持向量机&#xff08;英语&#xff1a;su…
阅读更多...
[BLE] Heart Rate Protocol - Sensor

[BLE] Heart Rate Protocol - Sensor

写在前面 目前我从网上找到的有关BLE心率协议的博文内容良莠不齐&#xff0c;很难让人根据文章内容来全面理解心率服务&#xff1b;此外SIG网站上有关心率服务的文档比较多&#xff0c;内容比较碎&#xff0c;需要读者从多个文档中将需要的内容拼接起来&#xff0c;因此写下这…
阅读更多...
【动态规划】路径问题|不同路径I|不同路径II|珠宝的最高价值|下降路径的最小和|最小路径和|

【动态规划】路径问题|不同路径I|不同路径II|珠宝的最高价值|下降路径的最小和|最小路径和|

一、不同路径I 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; &#x1f4a1;细节&#xff1a; 1.多开一行和一列&#xff08;跟一维数组多开一个位置一样&#xff09;&#xff0c;这样方便初始化 2.状态转移方程&#xff1a;注意走一步并不是多一种走的路径&#xff0…
阅读更多...
在编程的世界里，我相信每一行代码都是一次对未来的投资

在编程的世界里，我相信每一行代码都是一次对未来的投资

&#x1f600;前言 突然有感而发也是激励自己互勉 &#x1f3e0;个人主页&#xff1a;尘觉主页 文章目录 在编程的世界里&#xff0c;我相信每一行代码都是一次对未来的投资类似句子编程的本质代码的价值构建可持续的未来结语 在编程的世界里&#xff0c;我相信每一行代码都是一…
阅读更多...
数据库基础--MySQL多表查询之外键约束

数据库基础--MySQL多表查询之外键约束

MySQL多表关系 一对一 顾名思义即一个对应一个的关系&#xff0c;例如身份证号对于每个人来说都是唯一的&#xff0c;即个人信息表与身份证号信息表是一对一的关系。车辆信息表与车牌信息表也是属于一对一的关系。 一对多 即一个表当中的一个字段信息&#xff0c;对应另一张…
阅读更多...
【数据库原理及应用】期末复习汇总高校期末真题试卷02

【数据库原理及应用】期末复习汇总高校期末真题试卷02

试卷 一、填空题 数据库系统是指计算机系统中引入数据库后的系统&#xff0c;一般由数据库、________、应用系统、数据库管理员和用户构成。当数据库的存储结构发生了改变&#xff0c;由数据库管理员对________映象作相应改变&#xff0c;可以使________保持不变&#xff0c;…
阅读更多...
vue快速入门（五十一）历史模式

vue快速入门（五十一）历史模式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 历史模式配置方法 默认哈希模式&#xff0c;历史模式与哈希模式在表层的区别是是否有/#/ 其他差异暂不深究 源码 //导入所需模块 import Vue from "vue"; import VueRouter from "vue-router"; import m…
阅读更多...
从零开始学AI绘画，万字Stable Diffusion终极教程（一）

从零开始学AI绘画，万字Stable Diffusion终极教程（一）

【第1期】SD入门 2022年8月&#xff0c;一款叫Stable Diffusion的AI绘画软件开源发布&#xff0c;从此开启了AIGC在图像上的爆火发展时期 率先学会SD的人&#xff0c;已经挖掘出了越来越多AI绘画有趣的玩法 从开始的AI美女、线稿上色、真人漫改、头像壁纸 到后来的AI创意字、AI…
阅读更多...
华为eNSP小型园区网络配置（上）

华为eNSP小型园区网络配置（上）

→跟着大佬学习的b站直通车← 目标1&#xff1a;dhcp分配ip地址 目标2&#xff1a;内网用户访问www.yzy.com sw1 # vlan batch 10 # interface Ethernet0/0/1port link-type accessport default vlan 10 # interface Ethernet0/0/2port link-type trunkport trunk allow-pass…
阅读更多...
oracle pl/sql 如何让sql windows 显示行号

oracle pl/sql 如何让sql windows 显示行号

oracle pl/sql 如何让sql windows 显示行号 下载最新版的pl/sql第一步&#xff0c;在preferences中对sql Windows进行设置&#xff0c;如下所示第二步&#xff0c;在preferences中对User interface进行设置&#xff0c;如下所示结果如下当然&#xff0c;还可以通过右键选择是否…
阅读更多...
iptables---防火墙

iptables---防火墙

防火墙介绍 防火墙的作用可以理解为是一堵墙&#xff0c;是一个门&#xff0c;用于保护服务器安全的。 防火墙可以保护服务器的安全&#xff0c;还可以定义各种流量匹配的规则。 防火墙的作用 防火墙具有对服务器很好的保护作用&#xff0c;入侵者必须穿透防火墙的安全防护…
阅读更多...
【大模型学习】私有大模型部署（基础知识）

【大模型学习】私有大模型部署（基础知识）

私有大模型 优点 保护内部隐私 缺点 成本昂贵 难以共享 难以更新 大模型底座 基础知识点 知识库 知识库是什么&#xff1f; 知识库的作用是什么&#xff1f; 微调 增强大模型的推理能力 AI Agent 代理&#xff0c;与内部大模型进行交互 开源 and 闭源 是否可以查…
阅读更多...
二叉树的实现（详解，数据结构）

二叉树的实现（详解，数据结构）

目录 一&#xff0c;二叉树需要实现的功能 二&#xff0c;下面是各功能详解 0.思想&#xff1a; 1.创建二叉树结点&#xff1a; 2.通过前序遍历的数组"ABD##E#H##CF##G##"构建二叉树 3.二叉树销毁&#xff1a; 4.前序遍历&#xff1a; 5.中序遍历&#xff1a;…
阅读更多...
QT5之布局操作

QT5之布局操作

目录 实验之前的前提 局部布局和整体布局定义 快捷工具 水平和垂直布局 水平布局 在对象区域可以看出三个已经被水平布局在一起 在对象区域选中布局&#xff0c;点击工具取消当前布局 可以将两个小局部进行大局部布局 网格布局 弹簧布局 分割器布局 器件对齐边距 也…
阅读更多...
Java Map集合(一)

Java Map集合(一)

1. Map接口 1.1 Map接口概述 Map接口是一种双列集合。Map的每个元素都包含一个键对象Key和一个值对象Value &#xff0c;键对象和值对象之间存在对应关系&#xff0c;这种关系称为映射&#xff08;Mapping&#xff09;。 Map接口中的元素&#xff0c;可以通过 key 找到 value&…
阅读更多...
STD10A230XCB电源模块STD05A230XCB整流模块介绍

STD10A230XCB电源模块STD05A230XCB整流模块介绍

STD10A230XCB电源模块STD05A230XCB整流模块介绍&#xff0c;直流屏电源模块STD05A230XCB&#xff0c;整流模块STD10A115XCB&#xff0c;STD20A115XCB&#xff0c;STD10A230X&#xff0c;STD05A230X&#xff0c;直流屏充电模块的关键词: 电力智能高频开关充电模块STD20A230XCB,高…
阅读更多...
这是一个简单的照明材料网站，后续还会更新

这是一个简单的照明材料网站，后续还会更新

1、首页效果图 代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>爱德照明网站首页</title><style>/*外部样式*/charset "utf-8";*{margin: 0;padding: 0;box-sizing: border-box;}a{text-dec…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023