2.3 iHRM人力资源 - 路由、左侧菜单栏、处理token失效、退出登录、修改密码

iHRM人力资源 - 处理token失效、退出登录、修改密码

文章目录

iHRM人力资源 - 处理token失效、退出登录、修改密码
一、退出登录
- 1.1 处理token失效
- 1.2 调整下拉菜单
- 1.3 退出登录
二、修改密码
- 2.1 弹出层dialog
- 2.2 表单结构
- 2.3 表单校验
- 2.4 表单提交
三、路由
- 3.1 清理多余组件和路由
- 3.2 创建路由与页面
- 3.3 批量创建路由和组件
四、解析左侧菜单渲染
五、显示项目logo

一、退出登录

1.1 处理token失效

流程图如下所示

拦截器在如下所示的位置

// 创建响应拦截器,并且两个参数都是回调函数
service.interceptors.response.use(
  // 请求成功时响应,此时的响应默认包裹了一层data，即response.data才是后台服务返回的内容
  (response) => {
    // 一次性解析出response.data中的三个属性
    const { data, message, success } = response.data
    if (success) {
      // 此时响应正常
      return data
    } else {
      Message({ type: 'error', message: message })
      return Promise.reject(new Error(message))
    }
  },
  // 请求失败时响应
  async(error) => {
    if (error.response.status === 401) {
      Message({ type: 'warning', message: 'token 超时了，请重新登录' })
      // token超时,调用action退出登录
      // dispatch返回的是一个promise，这里会等dispatch执行完再执行路由跳转
      await store.dispatch('user/logout')
      // 主动跳转到登录页
      router.push('/login')
      return Promise.reject(error)
    }
    // this.$message.warning 不能这么使用，因为此时的this不是组件实例对象
    Message({ type: 'error', message: error.message })
    // 默认支持promise的,下面语句相当于终止了当前promise的执行
    return Promise.reject(error)
  }
)

async…await：

我们store.dispatch(‘user/logout’)中的dispatch其实是一个Promise，这里加一个“async…await”是为了将用户的信息全部删除完成后再跳转到登录页router.push(‘/login’)

加上“async…await”后，就会强制等待把用户信息、token全部删除干净了再跳转到登录页

拦截器中需要调用vuex内容

// Mutations类似java中的数据层，只对数据进行操作，不对业务操作（比如数据加减乘除）
const mutations = {
  // 从浏览器缓存删除token
  removeToken(state) {
    // 删除vuex的token
    state.token = null
    // 删除缓存中的token
    removeToken()
  },
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  }
    ..........
}


/**
 * actions似java中的业务逻辑层，对逻辑操作，然后向mutations发送数据，在这个业务逻辑中也可以互相调用
 * actions可以做异步操作
 */
const actions = {
  // 退出登录的action
  logout(context) {
    // 删除用户token
    context.commit('removeToken')
    // 删除用户信息(设置用户信息为空对象)
    context.commit('setUserInfo', {})
  },
    ...................
}

1.2 调整下拉菜单

我们现在菜单的内容是英文的形式，现在调整成中文的形式

其实就是页面这部分的内容：

代码中的位置如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码如下图所示：

<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>

    <breadcrumb class="breadcrumb-container"/>

    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <!--用户头像，v-if判断用户头像是否存在-->
          <img v-if="avatar" :src="avatar" class="user-avatar">
          <!--如果用户头像不存在的时候执行下面的v-else,显示用户名的第一个字-->
          <!--当name时null或者undefined时name.charAt(0)会报错，但是当在name之后加上“?”后，如果name为null或者undefined，就不会执行charAt(0)，也不会报错了-->
          <!-- "name?" 可选操作符，表示验证name是否一定有值。 此语法需要vue2.7.0之后的版本-->
          <span v-else class="username">{{ name?.charAt(0) }}</span>
          <!--用户名称-->
          <span class="name">{{ name }}</span>
          <!--图标（设置图标，是一个齿轮的样式）-->
          <i class="el-icon-setting"/>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              <!--Home-->
              首页
            </el-dropdown-item>
          </router-link>
          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>
              <!--Github-->
              项目地址
            </el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>
              <!--Docs-->
              修改密码
            </el-dropdown-item>
          </a>
          <!--divided 属性是在列的上面有个分割线，我们去掉-->
          <!--<el-dropdown-item divided @click.native="logout">-->
          <el-dropdown-item @click.native="logout">
            <span style="display:block;">
             <!--Log Out-->
              退出登录
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

1.3 退出登录

实现退出登录功能

我们之前在处理token失效的时候写过退出的Action，我们直接调用就好了，调用完Action，直接将页面跳转到登录页面

<el-dropdown-item @click.native="logout">
  <span style="display:block;">
   <!--Log Out-->
    退出登录
  </span>
</el-dropdown-item>

native：事件的修饰符，此时是修饰@click点击事件，目的是注册组件的根元素的原生事件（也就是H5事件）

因为el-dropdown-item的标签并不是H5的标签，@click.native表示el-dropdown-item标签最终形成的H5的标签去注册H5标签的点击事件

如果不写“.native”表示注册的这个组件的自定义事件，而这个组件本身并没有click这个自定义事件，所以我们需要native触发click点击事件

对于某个标签有没有点击事件，el开头的标签我们开element-ui文档即可，通过下面的文档发现，el-dropdown-item并没有点击事件

  methods: {
    async logout() {
      // 清除用户信息
      await this.$store.dispatch('user/logout')
      // await表示等待上面的代码执行完毕后，执行下面的代码，跳转页面到登录界面
      this.$router.push('/login')
    }
  }

点击“退出登录”后，其实就跳转到了http://localhost:9528/#/login页面

二、修改密码

实现下面的一个效果

说明：超级管理员的密码不可修改，修改密码的时候要有校验功能

修改密码的整体流程

依然是下面这个位置

2.1 弹出层dialog

解释修饰符sync

可以接收子组件传过来的事件和值

我们点击弹出层dialog的“×”号后，所以“showDialog”接收到了el-dialog传过来的false值

这些事情是在el-dialog源码中写的

<template>
  <div>
    <!--放置dialog-->
    <!--title是dialog的标题; :visible.sync用来控制是否显示弹出层 sync作用是点击“×”号时能把弹出层关闭掉-->
    <el-dialog title="修改密码" :visible.sync="showDialog" width="450px">
      <!--放置dialog表单-->
    </el-dialog>
  </div>
</template>

data() {
  return {
    // 控制弹层的显示和隐藏
    showDialog: false
  }
},
  methods: {
    updatePassword() {
      // 弹出层显示
      this.showDialog = true
    }
}

2.2 表单结构

如下图所示的结构

<!--放置dialog-->
<!--title是dialog的标题; :visible.sync用来控制是否显示弹出层 sync作用是点击“×”号时能把弹出层关闭掉-->
<el-dialog title="修改密码" :visible.sync="showDialog" width="450px">
  <!--放置dialog表单-->
  <!--设置完成label-width="120px"后，提示信息就和输入框在同一行了-->
  <el-form label-width="120px">
    <!--label属性其实就是此item的提示信息-->
    <el-form-item label="旧密码">
      <el-input show-password size="small"></el-input>
    </el-form-item>
    <!--show-password 属性表示输入的内容是密文-->
    <el-form-item label="新密码">
      <el-input show-password size="small"></el-input>
    </el-form-item>
    <el-form-item label="重复密码">
      <el-input show-password size="small"></el-input>
    </el-form-item>
    <!--按钮-->
    <el-form-item>
      <el-button size="mini" type="primary">确认修改</el-button>
      <el-button size="mini">取消修改</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

2.3 表单校验

其实就是实现下图所示的功能

<!--放置dialog-->
<!--title是dialog的标题; :visible.sync用来控制是否显示弹出层 sync作用是点击“×”号时能把弹出层关闭掉-->
<el-dialog title="修改密码" :visible.sync="showDialog" width="450px">
  <!--放置dialog表单-->
  <!--设置完成label-width="120px"后，提示信息就和输入框在同一行了-->
  <!--ref属性是为了获取整个表单的属性-->
  <el-form label-width="120px" :model="passForm" :rules="rules" ref="passForm">
    <!--label属性其实就是此item的提示信息-->
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input show-password v-model="passForm.oldPassword" size="small"></el-input>
    </el-form-item>
    <!--show-password 属性表示输入的内容是密文-->
    <el-form-item label="新密码" prop="newPassword">
      <el-input show-password v-model="passForm.newPassword" size="small"></el-input>
    </el-form-item>
    <el-form-item label="重复密码" prop="confirmPassword">
      <el-input show-password size="small" v-model="passForm.confirmPassword"></el-input>
    </el-form-item>
    <!--按钮-->
    <el-form-item>
      <el-button size="mini" type="primary">确认修改</el-button>
      <el-button size="mini">取消修改</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

data() {
  return {
    // 控制弹层的显示和隐藏
    showDialog: false,
    // 修改密码功能表单内容
    passForm: {
      // 旧密码
      oldPassword: '',
      // 新密码
      newPassword: '',
      // 确认密码
      confirmPassword: ''
    },
    // 修改密码功能的表单校验内容
    rules: {
      // 旧密码
      oldPassword: [
        // trigger: 'blur' 表示失去焦点的时候再触发校验功能
        { required: true, message: '旧密码不能为空', trigger: 'blur' },
        {}
      ],
      // 新密码
      newPassword: [
        { required: true, message: '新密码不能为空', trigger: 'blur' },
        { min: 6, max: 16, message: '新密码长度6-16', trigger: 'blur' }
      ],
      // 确认密码
      confirmPassword: [
        { required: true, message: '重复密码不能为空', trigger: 'blur' },
        // 当满足第一个required: true触发规则后，才会触发下面的这个规则
        // 自定义校验规则validator，参数1：rule规则，参数2：value参数值，也是就是重复密码的值参数3：callback必须执行的回调函数
        {
          trigger: 'blur', validator: (rule, value, callback) => {
            // 只有当此方法是牵头函数的时候，此处的this才指代组件实例对象
            if (this.passForm.newPassword === value) {
              // 用户输入的新密码和重复密码是相等的，我们执行一下callback回调函数
              callback()
            } else {
              // 否则就放入一个错误对象
              callback(new Error('重复密码和新密码输入不一致'))
            }
          }
        }
      ]
    }
  }
}

2.4 表单提交

如果调用接口失败的话，我们可以不用处理，我们在拦截器中配置了失败时候的提示信息

接口可以写在下面这个问题里

<!--按钮-->
<el-form-item>
  <el-button @click="btnOK" size="mini" type="primary">确认修改</el-button>
  <el-button @click="btnCancel" size="mini">取消修改</el-button>
</el-form-item>

btnOK() {
  this.$refs.passForm.validate(async isOK => {
    if (isOK) {
      // 表示校验通过，下一步调用接口
      await updatePassword(this.passForm)
      // 只要执行到这里，说明一定是执行成功
      this.$message.success('修改密码成功')
      this.btnCancel()
      // // 关闭Dialog
      // this.showDialog = false
      // // 重置表单
      // this.$refs.passForm.resetFields()
    }
  })
},
btnCancel() {
  // 关闭Dialog
  this.showDialog = false
  // 重置表单
  this.$refs.passForm.resetFields()
}

api请求内容

// 更改用户密码
export function updatePassword(data) {
  return request({
    url: '/sys/user/updatePass',
    method: 'PUT',
    // 下面这行参数可以简写成 data
    data: data
  })
}

修改下面的bug

当我们点击右上角的叉号后，再打开此页面，会出现下面这个情况，还会有表单验证的提示

按理说我们这是重新打开的表单，不能用表单验证提示，所以改一下

其实就是加了一个@close属性

<!--放置dialog-->
<!--title是dialog的标题; :visible.sync用来控制是否显示弹出层 sync作用是点击“×”号时能把弹出层关闭掉-->
<!--除此之外我们还要添加@close="btnCancel，因为我们只添加sync，当关闭dialog再打开后，表单验证的内容还会存在，所以再加一个@close，当dialog关闭后会执行@close-->
<el-dialog title="修改密码" @close="btnCancel" :visible.sync="showDialog" width="450px">
</el-dialog>

三、路由

3.1 清理多余组件和路由

我们现在只保留登录页面、主页、404页面，其他的全部删除

下面选中的全部删除

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

删除页面后，我们对应的路由配置也要删除

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/**
 *  Layout @/在vue中代表路径别名
 *  @ 符号表示当前目录的src
 *  @/ 表示src下的layout,而layout又是一个目录，所以会拉取index.vue文件
 *  即index.vue组件就是我们的路由组件，会实现二级路由
 * */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

  // 404 page must be placed at the end !!!
  // 下面这行路由是兜底的方案，如果找不到页面，就会匹配最后的*，然后跳转到404页面
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

目前的首页内容如下图所示

请求模块多余的内容也删除

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选中的内容删除

3.2 创建路由与页面

人力资源项目的业务模块如下图所示

建立对应的路由组件-路由配置

其实相当于把上面的八个功能都模块化了，组件模块化、路由模块化

创建department组织架构模块

创建department的路由信息

// 这个相当于一级路由
import layout from '@/layout/index.vue'

// 默认导出
export default {
  // 路由信息
  path: '/department',
  // 一级路由
  component: layout,
  // 二级路由
  children: [
    {
      // 二级路由path为空，表示'/department'路径时显示一级路由+二级路由
      // 并且按需导入department文件下的组件
      path: '',
      component: () => import('@/views/department'),
      // name属性在这里可以用来跳转，也可以用来标记路由
      // 为什么要标记路由？因为我们后面要做权限的控制，对权限做细分化，
      name: 'department',
      // 路由的元信息，其实就是用来存储数据的，比如说图标信息
      // 在我们的基础模板里面读取了meta的icon和title，并显示在了页面左侧菜单上
      meta: {
        icon: 'tree', // 菜单的图标
        title: '组织' // 菜单的标题
      }
    }
  ]
}

在总路由配置中引用department路由

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/**
 *  Layout @/在vue中代表路径别名
 *  @ 符号表示当前目录的src
 *  @/ 表示src下的layout,而layout又是一个目录，所以会拉取index.vue文件
 *  即index.vue组件就是我们的路由组件，会实现二级路由
 * */
import Layout from '@/layout'
import departmentRouter from '@/router/modules/department'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  departmentRouter,

  // 404 page must be placed at the end !!!
  // 下面这行路由是兜底的方案，如果找不到页面，就会匹配最后的*，然后跳转到404页面
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

主页面内容

3.3 批量创建路由和组件

总路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/**
 *  Layout @/在vue中代表路径别名
 *  @ 符号表示当前目录的src
 *  @/ 表示src下的layout,而layout又是一个目录，所以会拉取index.vue文件
 *  即index.vue组件就是我们的路由组件，会实现二级路由
 * */
import Layout from '@/layout'
import departmentRouter from '@/router/modules/department'
import approvalRouter from '@/router/modules/approval'
import attendanceRouter from '@/router/modules/attendance'
import employeeRouter from '@/router/modules/employee'
import permissionRouter from '@/router/modules/permission'
import roleRouter from '@/router/modules/role'
import salaryRouter from '@/router/modules/salary'
import socialRouter from '@/router/modules/social'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
  departmentRouter,
  roleRouter,
  employeeRouter,
  permissionRouter,
  attendanceRouter,
  approvalRouter,
  salaryRouter,
  socialRouter,
  // 404 page must be placed at the end !!!
  // 下面这行路由是兜底的方案，如果找不到页面，就会匹配最后的*，然后跳转到404页面
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

页面展示

四、解析左侧菜单渲染

我们上面通过建立路由生成了左侧的菜单，那到底是怎么实现的？

我们的左侧菜单栏是一个叫“sidebar”的菜单组件，会根据路由组件渲染出左侧的菜单内容

siderbar组件会读取路由信息并且会遍历，然后生成一个叫做siderbarItem的组件且会生成很多个（有多少个路由就会生成多少个）

并不是有多少个siderbarItem就会显示多少个左侧菜单，我们会针对siderbarItem组件进行条件渲染，来判断会不会显示

比如登录、404页面就没有在侧边栏展示

如果确定某个组件显示，我们就又会用上一个组件叫做Item组件，此Item组件会渲染咱们传进去的标题和图标，也是就一个渲染过程

我们查看一下这个组件的代码

五、显示项目logo

在settings.js文件中会有许多的配置选项，其中sidebarLogo属性表示是否显示logo标志

module.exports = {

  title: '人力资源后台管理系统',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

当设置为true后，我们这里就会有一个图标

但是这个图标并不是我们想要的，所以我们要去左侧菜单里那里进行修改

<template>
  <!--当菜单栏缩小的时候会有一个collapse，当这个类collapse存在，则就是在缩小的情况下-->
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <img src="@/assets/common/logo.png" class="sidebar-logo">
      </router-link>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      title: 'Vue Admin Template',
      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  //background: #2b2f3a;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 140px;
      //height: 32px; 高度自适应
      vertical-align: middle;
      margin-right: 12px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
      width: 32px;
      height: 32px;
    }
  }
}
</style>