人力资源管理后台 === 登陆+主页鉴权

目录

1. 分析登录流程

2. Vuex中用户模块的实现

3.Vue-cli代理解决跨域

4.axios封装

5.环境区分

6. 登录联调

7.主页权限验证-鉴权

1. 分析登录流程

image.png

传统思路都是登录校验通过之后，直接调用接口，获取token之后，跳转到主页。

  • vue-element-admin的登录思路：
  1. 登录表单校验通过
  2. 调用Vuex提供的登录的action
  3. 登录的Action中会调用接口
  4. 登录接口如果成功执行，会返回token
  5. 利用Vuex的特性，将token共享的到Vuex中，这样Vuex就统一管理了token,别的地方想要使用，直接通过Vuex就可以
  6. 登录接口会调用单独封装的请求模块(api)
  7. 请求模块中又会使用用到axios封装的请求工具
  8. 而请求工具又要考虑区分 开发环境和生产环境的问题
  9. 请求时还要考虑前后分离项目产生的跨域问题，要使用代理解决跨域

2. Vuex中用户模块的实现

登录流程中最核心的是用户模块，所以这部分我们单独拿出来进行重写。

代码位置(src/store/modules/user.js)

  • 删除原有模板中用户模块中的内容
  • 导出Vuex子模块-声明一个状态token
const state = {
  token: null
}
const mutations = {}
const actions = {}
export default {
   namespaced: true,
   state,
   mutations,
   actions
}
  • 实现token的Vue数据持久化
import { getToken, setToken, removeToken } from '@/utils/auth'
const state = {
  token: getToken(), // 从缓存中读取初始值
}
const mutations = {
  setToken(state, token) {
    state.token = token
    // 同步到缓存
    setToken(token)
  },
  removeToken(state) {
    // 删除Vuex的token
    state.token = null
    removeToken()
  }
}
export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}
  • 实现登录的action方法
const actions = {
  // context上下文，传入参数
  async login(context, data) {
    console.log(data)
    // todo: 调用登录接口
    const token = await login(data)
    // 返回一个token 123456
    context.commit('setToken', token)
  },
}
  • 在登录组件中调用该action方法-代码位置(src/views/login/index.vue)
export default {
  methods: {
    login() {
      this.$refs.form.validate((isOK) => {
        if (isOK) {
          this.$store.dispatch("user/login", this.loginForm)
        }
      })
    }
  }
}

注意： 因为user模块导出的时候namespaced为true，所以我们调用action的时候要加上模块名称如user/login

3.Vue-cli代理解决跨域

上个小节，完成了Vuex用户模块的创建和持久化管理，现在已经调通了 **登录页面- action，**继续往下需要处理
请求模块-axios封装-跨域-区分环境

image.png

我们要先把跨域问题解决才能考虑其他内容的开发

  • 首先为什么会有跨域？

image.png

在后端没有开启cors的情况下，浏览器的同源策略会直接限制后端返回的数据给到前端。这是因为我们目前所有的项目都是前后分离，前端一个服务， 后端一个服务，后端不开cors只能前端自己想办法。

  • 代理是怎么解决跨域的？

image.png

既然前端不能直接请求后端服务，那就搞个中间服务，中间服务刚好和我们的前端服务同源，前端和中间服务可以通信，而中间服务是node, node后台向后端发请求是不受同源策略影响的，因为同源策略只针对浏览器！！！， 这样就是代理，中间层的服务将前端的请求代理给了后端接口。

  • 具体怎么做呢？

跨域有开发环境跨域和生产环境跨域，我们最后上线的时候要考虑生产环境跨域，目前只需要考虑开发环境。

  • 配置文件可以直接配置代理 vue.config.js
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'https://heimahr.itheima.net'
      }
    }
    // before: require('./mock/mock-server.js')
  },

注意： 要去掉before这个选项，这个是mock数据，会影响到我们的请求，并且修改完成之后要重启服务。

4.axios封装

完成了代理跨域，就可以考虑axios的封装了。

image.png

axios封装主要封装做哪些呢？

  • 基础地址，超时时间
  • 请求拦截器-统一注入token
  • 响应拦截器-解构数据-处理异常

image.png

  • axios的基础功能

image.png

代码位置(src/utils/request.js)

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
// 获取axios实例
const service = axios.create({
  /** 
   * process.env node.js 的全局变量 获取环境变量的值
   * .env.development 文件设置开发环境 npm run dev时默认读取
   * .env.production  文件设置生产环境 npm run build 时默认读取
   * 若想在  build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式
   *    例如 --mode test 则将读取 .env.test 文件
   * */

  // 
  baseURL: process.env.VUE_APP_BASE_API,//基础地址
  timeout: 10000,//超时时间
})// 基础配置

// 请求拦截器（成功1 失败2）
service.interceptors.request.use((config) => {
  // 注入token
  //  this.$store.getters（不是组组件实例）
  // store.getters.token => 请求头里面
  if (store.getters.token) {
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
}, (error) => {
  // 失败执行promise
  return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((response) => {
  const { data, message, success } = response.data // 默认json格式
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    return Promise.reject(new Error(message))
  }
}, (error) => {
  // error.message
  Message({ type: 'error', message: error.message })
  return Promise.reject(error)
})

export default service

5.环境区分

image.png


 

image.png

image.png

image.png

  • 将.env.development中的值改为 /api 作为请求工具的基础地址
  • **process.env.VUE_APP_BASE_API **的表示读取该变量，npm run dev时该变量为 /api, npm run build:prod时 该变量为 /prod-api

6. 登录联调

目前登录功能只剩下红色的部分还需要

image.png

  • 首先封装登录的API请求-代码位置(src/api/user.js)
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/sys/login',
    method: 'post',
    data
  })
}
  • Vuex中的用户模块调用登录接口-代码位置(src/store/modules/user.js)
const actions = {
  // context上下文，传入参数
  async login(context, data) {
    console.log(data)
    // todo: 调用登录接口
    const token = await login(data)
    // 返回一个token 123456
    context.commit('setToken', token)
  }
}
  • 登录成功后，跳转到主页-代码位置(src/views/login/index.vue)
  methods: {
    login() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await this.$store.dispatch('user/login', this.loginForm)
          // Vuex 中的action 返回的promise
          // 跳转主页
          this.$router.push('/')
        }
      })
    }
  }
  • 区分不同环境的数据-代码位置(src/views/login/index.vue)

因为开发环境为了便利，我们将用户的账户信息和密码都默认写在了页面上，但是真正的项目我们不可能将数据进行暴露出去，所以在生产环境时应该将 用户的手机号和密码抹去

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: process.env.NODE_ENV === 'development' ? '123456' : '',
        isAgree: process.env.NODE_ENV === 'development'
      }
    }
  }
}

7.主页权限验证-鉴权

当前项目用户是否有权限访问主页，要考虑当前有没有token, 如果有token, 用户还想去登录页，我们可以直接去主页-这个就是免登录功能。有token的情况下，直接到主页。

image.png

  • 访问主页-有token放过，没有token跳到登录页
  • 访问登录-有token跳到主页，没有token放过

代码实现-代码位置(src/pemission.js)

import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

/**
 *前置守卫
 *
*/

const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next（地址）并没有执行后置守卫
      nprogress.done()
    } else {
       next() // 放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/** *
 * 后置守卫
 * **/
router.afterEach(() => {
  nprogress.done()
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【心得】XXE漏洞利用个人笔记

【心得】XXE漏洞利用个人笔记

XML中关于DTD类型(内部(SYSTEM)的和外部(PUBLIC)的区别) xxe的利用 XML Entity 实体注入 当程序处理xml文件时，没有禁止对外部实体的处理，容易造成xxe漏洞 危害 主流是任意文件读取 XML 文件 一般表示带有结构的数据 祖父 3个叔父 8个堂弟堂妹 …
阅读更多...
App备案与iOS云管理式证书 ，公钥及证书SHA-1指纹的获取方法

App备案与iOS云管理式证书 ，公钥及证书SHA-1指纹的获取方法

📝 App备案与iOS云管理式证书 ，公钥及证书SHA-1指纹的获取方法 引言 在iOS应用程序开发过程中，进行App备案并获取公钥及证书SHA-1指纹是至关重要的步骤。本文将介绍如何通过appuploader工具获取iOS云管理式证书 Distribution Managed 公钥…
阅读更多...
Django（十一、auth认证模块）

Django（十一、auth认证模块）

文章目录 一、auth介绍auth认证相关模块及操作扩展auth_user表 一、auth介绍 Django自带一个admin路由，但是需要我们提供管理员账户和密码，如果想要使用admin后台管理，需要先创建表，然后创建管理员账户。 直接执行数据类迁移命令…
阅读更多...
二、Lua数据类型

二、Lua数据类型

文章目录 一、数据类型nil二、数据类型boolean三、数据类型number四、数据类型String（一）用单引号或双引号：（二）可以包含换行的字符串（三）字符串与数字做数学运算时，优先将字符串转换…
阅读更多...
抖音开新店，十个设置，实操满满全是干货

抖音开新店，十个设置，实操满满全是干货

抖店开店的第一天手足无措不知从哪入手？我给大家分享一个新手开店必须完成的十个设置，实操满满全是干货，每一项都很重要！特别是新手一定要认真看，因为这个直接关系到你店铺能否正常经营，跟着我一起来实操一…
阅读更多...
C语言线性表的实现（详解）

C语言线性表的实现（详解）

数据结构之线性表 ​ 线性表的基本概念：线性表是由0个或者多个数据元素的有限序列 ​ 特性是： ​ 1：数据元素之间都是有顺序的 ​ 2：数据元素的个数是有限的， ​ 3：数据元素的类型是相同的 ​ 性质是&…
阅读更多...
Java代码生成器，一键在线生成，支持自定义模板

Java代码生成器，一键在线生成，支持自定义模板

【Java代码生成神器】自动化生成Java实体类、代码、增删改查功能！点击访问 推荐一个自己每天都在用的Java代码生成器！这个网站支持在线生成Java代码，包含完整的Controller\Service\Entity\Dao代码，完整的增删改查功能&#xff01…
阅读更多...
给国外客户价格报低了怎么办

给国外客户价格报低了怎么办

前一段时间有一个单子的货发出去了，被朋友提醒才发现自己报错了价格，造成了亏损，而报错价格的原因并不是自己看错了或者是抄错了价格，而是自己的脑子里记错了产品的价格列表。 如果不是朋友善意的提醒，大概我会一直错…
阅读更多...
.NET的Dockerfile文件编写要点——以WOL项目为例

.NET的Dockerfile文件编写要点——以WOL项目为例

本文以 WOL 的.NET 项目为例，介绍了 Dockerfile 的基础知识和编写要点，旨在帮助读者更好地理解和掌握如何为 .NET 应用创建和优化 Dockerfile。 1. 背景 前面我们已经勾选了 Docker 容器化支持，项目已经生成了一个默认的 Dockerfile。但在实…
阅读更多...
快速上手Banana Pi BPI-R4 MediaTek MT7988A 开源路由器开发板

快速上手Banana Pi BPI-R4 MediaTek MT7988A 开源路由器开发板

基础开发 准备开发 * 准备8G以上TF卡、USB转串口线、Ubuntu系统* 使用 USB 串行电缆（3.3V TTL，波特115200）连接到 BPI-R4 上的调试控制台G接地；RXBPI-R4输入；TXBPI-R4输出* BPI-R4 引导程序和设备选择跳线设置* 例子…
阅读更多...
部署Jenkins

部署Jenkins

一、介绍 Jenkins 、Jenkins概念 Jenkins是一个功能强大的应用程序，允许持续集成和持续交付项目，无论用的是什么平台。这是一个免费的源代码，可以处理任何类型的构建或持续集成。集成Jenkins可以用于一些测试和部署技术。Jenkins是一种软件允…
阅读更多...
代码随想录算法训练营第五十天|309. 买卖股票的最佳时机含冷冻期、714. 买卖股票的最佳时机含手续费

代码随想录算法训练营第五十天|309. 买卖股票的最佳时机含冷冻期、714. 买卖股票的最佳时机含手续费

LeetCode 309. 买卖股票的最佳时机含冷冻期 题目链接：309. 买卖股票的最佳时机含冷冻期 - 力扣（LeetCode） 所谓的冷冻期，就是卖了股票后的第二天不能买入该股票（股票上的N2,N1是今天卖明天能买)，所以影响到…
阅读更多...
推荐你一个基于Koin, Ktor Paging等组件的KMM Compose Multiplatform项目

推荐你一个基于Koin, Ktor Paging等组件的KMM Compose Multiplatform项目

推荐你一个基于Koin, Ktor & Paging等组件的KMM Compose Multiplatform项目 Kotlin Multiplatform Mobile（KMM）已经从一个雄心勃勃的想法发展成为一个稳定而强大的框架，为开发人员提供了在多个平台上无缝共享代码的能力。通过最近的稳定…
阅读更多...
肖sir __数据库练习__001

肖sir __数据库练习__001

建表语句： create table student ( id int(4),age int(8),sex int(4),name varchar(20), class int(4), math int(4)) DEFAULT charsetutf8; INSERT into student VALUES(1,25,1,‘zhansan’,1833,90); INSERT into student VALUES(2,25,1,‘lisi’,1833,67); INSER…
阅读更多...
单片机学习1——点亮一个LED灯

单片机学习1——点亮一个LED灯

Keil软件编写程序&#xff1a; 特殊功能寄存器声明&#xff1a; #include<reg52.h>sbit LED P1^0;void main() {LED 0;while(1); } 代码说明&#xff1a; sbit 语句是特殊功能位声明。 生成HEX文件&#xff0c;这个文件是下载到单片机里的文件。Options for Target…
阅读更多...
三方支付接口成为了电商竞争力的新动力

三方支付接口成为了电商竞争力的新动力

在当前快速发展的互联网时代&#xff0c;随着电子商务行业的兴起&#xff0c;支付体验已经成为企业获取竞争优势的重要因素。一个快速、安全、便捷的支付环节不仅可以提升用户的体验&#xff0c;还能有效促进交易的完成。在众多支付解决方案中&#xff0c;三方支付接口因其独特…
阅读更多...
CMakeList项目构建

CMakeList项目构建

CMakeList项目构建 OVERVIEW CMakeList项目构建cmake1.变量定义2.指定源文件路径3.指定头文件路径4.字符串操作5.日志打印6.预定义宏 cmake、makefile都是项目构建工具&#xff0c;通过make命令进行项目构建&#xff0c;大多的IDE都集成了make项目构建&#xff0c;如visual stu…
阅读更多...
Java Flight Record 详解

Java Flight Record 详解

核心概念 Java Flight Record 提供一个低开销的数据收集框架&#xff0c;用于对 Java 应用程序和 HotSpot JVM 进行故障排除。Flight Recorder 记录源自应用程序、JVM和操作系统的事件 Flight Record&#xff0c;顾名思义&#xff0c;相当于飞机黑匣子里保存的飞行记录 事件 …
阅读更多...
2023-11-27 LeetCode每日一题（子数组的最小值之和）

2023-11-27 LeetCode每日一题（子数组的最小值之和）

2023-11-27每日一题 一、题目编号 907. 子数组的最小值之和二、题目链接 点击跳转到题目位置 三、题目描述 给定一个整数数组 arr&#xff0c;找到 min(b) 的总和&#xff0c;其中 b 的范围为 arr 的每个&#xff08;连续&#xff09;子数组。 由于答案可能很大&#xff…
阅读更多...
Shopee买家号想要多开怎么解决？

Shopee买家号想要多开怎么解决？

拥有多个Shopee买家号有很多优势。多账号可以帮助卖家获得更多流量、还能帮助提供关键词排名、提高销量等。 但是要管理多个Shopee买家号并非易事。面对不同账号的登录、注销和切换&#xff0c;可能会花费大量的时间和精力。而且&#xff0c;Shopee平台对于使用同一IP地址同时登…
阅读更多...
最新文章

Copyright @ 2022~2023