day02-登录模块-主页鉴权

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 1.分析登录流程
    • 1.1传统思路是登录校验通过之后,直接调用接口,获取token之后,跳转到主页
    • 1.2vue-element-admin模板的登录思路:
  • 2. Vuex中用户模块的实现
    • 2.1代码位置src/store/modules/user.js
      • 2.1.1导出Vuex子模块-声明一个状态token
      • 2.1.2实现token的Vue数据持久化
      • 2.1.3实现登录的action方法
      • 2.1.4在登录组件中调用该action方法 代码位置 src/views/login/index.vue
      • 2.1.5注意:因为user模块导出的时候namespaced为true,所以我们调用action的时候要加上模块名称如user/login
  • 3.Vue-cli代理解决跨域
    • 3.1请求模块-axios封装-跨域-区分环境
    • 3.2跨域问题解决才能考虑其他内容的开发
      • 3.2.1为什么会有跨域
      • 3.2.2直接使用前端向后端发请求(后端没有开启cors)
        • 3.2.1.1浏览器的同源策略会直接限制后端返回的数据给到前端。因为项目是前后端分离的,前端一个服务,后端一个服务,后端不开cors只能前端另想办法了。
      • 3.2.2代理是怎么解决跨域的?
        • 前端不能直接请求后端服务,中间服务刚好和我们的前端服务同源,前端和中间服务可以通信,而中间服务是node,node后台向后端发请求是不受同源策略影响的,因为同源策略只针对浏览器!!!,这样就解决了问题,将前端的请求代理给了后端接口。
      • 具体怎么做?
        • 跨域有开发环境跨域和生产环境跨域,我们最后上线的时候要考虑生产环境跨域,目前只需要考虑开发环境。
        • 配置文件可以直接配置代理 vue.config.js
        • 注意:要去掉before这个选项,这个是mock数据,会影响到我们的请求,并且修改完成之后要重启服务。
  • 4.axios封装
  • 5.环境区分
        • Vue代码中NODE_ENV之外,所有的变量必须以VUE_APP_开头
  • 6.登录联调
        • 目前登录功能只剩下红色的部分
      • 首先封装登录的API请求-代码位置(src/api/user.js)
      • Vuex中的用户模块调用登录接口(src/store/modules/user.js)
      • 登录成功后,跳转到主页(scr/views/login/index.vue)
      • 区分不同环境的数据-代码位置(src/views/login/index.vue)
        • 开发环境为了便利,将用户的账户信息和密码都默认写在了页面上,但是真正的项目我们需要把手机号和密码抹去
  • 7.主页权限验证-鉴权
        • 当前项目用户是否有权限访问主页,要考虑当前有没有token, 如果有token, 用户还想去登录页,我们可以直接去主页-这个就是免登录功能。有token的情况下,直接到主页。
        • 访问主页-有token放过,没有token跳到登录页
        • 访问登录-有token跳到主页,没有token放过
        • src/pemission.js


1.分析登录流程

在这里插入图片描述

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

1.2vue-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中用户模块的实现

2.1代码位置src/store/modules/user.js

2.1.1导出Vuex子模块-声明一个状态token

const state = {token:null
}
const mutations = {};
const actions = {};
export default{namespaced:true,state,mutations,actions
}

2.1.2实现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的tokenstate.token = null;removeToken() }
}
export default{namespaced:true,//开启命名空间state,mutations,actions
}

2.1.3实现登录的action方法

const actions = {//context上下文,传入参数async login(context,data){console.log(data)//todo:调用登录接口const token = await login(data);//返回一个token context.commit('setToken',token) }
}

2.1.4在登录组件中调用该action方法 代码位置 src/views/login/index.vue

export default{methods:{login(){this.$refs.form.validate((isok)=>{if(isok){this.$store.dispatch("user/login",this.loginForm)} }) } }
}

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

3.Vue-cli代理解决跨域

3.1请求模块-axios封装-跨域-区分环境

在这里插入图片描述

3.2跨域问题解决才能考虑其他内容的开发

3.2.1为什么会有跨域

3.2.2直接使用前端向后端发请求(后端没有开启cors)

3.2.1.1浏览器的同源策略会直接限制后端返回的数据给到前端。因为项目是前后端分离的,前端一个服务,后端一个服务,后端不开cors只能前端另想办法了。

3.2.2代理是怎么解决跨域的?

在这里插入图片描述

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

具体怎么做?

跨域有开发环境跨域和生产环境跨域,我们最后上线的时候要考虑生产环境跨域,目前只需要考虑开发环境。
配置文件可以直接配置代理 vue.config.js
devServer:{port:port,open:true,overlay:{warnings:false,errors:true },proxy:{'/api':{target:'https://' } }
}
注意:要去掉before这个选项,这个是mock数据,会影响到我们的请求,并且修改完成之后要重启服务。

4.axios封装

  1. 完成了代理跨域,就可以考虑axios的封装了
    在这里插入图片描述

  2. axios封装主要封装做哪些

  3. 基础地址,超时时间

  4. 请求拦截器-统一注入token

  5. 响应拦截器-解构数据-处理异常
    在这里插入图片描述

  6. axios的基础功能
    在这里插入图片描述

  7. 位置 src/utils/request.js

import axios from 'axios'
import store from '@/store'
const service = axios.create({baseURL:'/api',timeout:1000,
})
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)=>{//失败执行promisereturn 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))}
},async(error)=>{Message({type:'error',message:error.message})return Promise.reject(error)
})
export default service

5.环境区分

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue代码中NODE_ENV之外,所有的变量必须以VUE_APP_开头

在这里插入图片描述

6.登录联调

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

在这里插入图片描述

首先封装登录的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);const token = await login(data)//返回一个token context.commit('setToken',token)}
}

登录成功后,跳转到主页(scr/views/login/index.vue)

methods:{login(){this.$refs.form.validate((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的情况下,直接到主页。

在这里插入图片描述

访问主页-有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){//存在tokenif(to.path === '/login'){//跳转到主页next('/');//并没有执行后置守卫nprogress.done()}else{next()//放行}}else{//没有tokenif(whiteList.includes(to.path)){next()}else{next('/login')//中转到登录页 nprogress.done() }}
})
//后置守卫
router.afterEach(()=>{nprogress.done()
})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信息(文字、图像、音频、视频等)在计算机中是如何存储及显示的

信息(文字、图像、音频、视频等)在计算机中是如何存储及显示的 图片的存储图片的文件格式像素数据的二进制表示存储和处理显示总结 图片的显示4. 像素点控制具体的像素控制过程示例总结 如题,这里以图片为例。 图片的存储 计算机桌面上的一…

基于盲信号处理的声音分离-基于改进的信息最大化的ICA算法

基于信息最大化的ICA算法的主要依据是使输入端与输出端的互信息达到最大,且输出各个分量之间的相关性最小化,即输出各个分量之间互信息量最小化,其算法的系统框图如图所示。 基于信息最大化的ICA算法的主要依据是使输入端与输出端的互信息达到…

华侨大学24计算机考研数据速览,专硕22408复试线290分,学硕11408接收调剂!

华侨大学计算机专业创建于1980年,是福建省最早设立计算机专业的高校之一。1982年成立计算机系,2008年成立计算机科学与技术学院。根据“华侨大学计算机科学与技术学院网站”资料,该院有计算机科学与技术、软件工程、网络工程3个本科专业&…

java中常见数据结构

ArrayList 是 Java 集合框架&#xff08;Java Collections Framework&#xff09;中的一个重要类&#xff0c;它实现了 List 接口&#xff0c;并提供了动态数组的功能。以下是 ArrayList 上的一些常用方法&#xff1a; 构造方法&#xff1a; ArrayList<E>(): 构造一个空的…

git基本使用(二):git分支的操作命令

Git 的多分支管理是指在同一个仓库中创建和管理多个分支&#xff0c;每个分支可以独立开发&#xff0c;互不干扰。分支是 Git 中的一种强大功能&#xff0c;允许开发人员同时在多个不同的功能、修复或实验上工作&#xff0c;而不会影响主分支或其他分支。通过多分支管理&#x…

spring-boot-starter-json配置对象属性为空不显示

问题背景 在Spring Boot中使用spring-boot-starter-json&#xff08;通常是通过jackson实现的&#xff09;时&#xff0c;如果你希望在序列化对象时&#xff0c;如果某个属性为空&#xff0c;则不显示该属性&#xff0c;你可以使用JsonInclude注解来实现这一点。 pom.xml <…

Java数据结构算法(最长递增序列二分查找)

前言: 最长递增子序列&#xff08;Longest Increasing Subsequence, LIS&#xff09;是指在一个给定的序列中&#xff0c;找到一个最长的子序列&#xff0c;使得这个子序列中的元素是单调递增的。子序列不要求在原序列中连续。 实现原理 使用一个 tails 列表&#xff0c;其中…

Java对象集合按照指定元素顺序排序

需求背景 最近在对一个集合列表的数据进行排序&#xff0c;需求是要集合数据按照一个排序状态值进行排序&#xff0c;而这个状态值&#xff0c;不是按照从小到大这样的顺序排序的&#xff0c;而是要按照特定的顺序&#xff0c;比如按照1, 0, 2的顺序排的&#xff0c;所以需要自…

clickhouse count和uniqCombined

count(distinct ) 和 uniqCombined 获取去重后的总数。 去重&#xff1a;order by distinct argMax group by 哪个好&#xff1f;&#xff1f; clickhouse数据去重函数介绍&#xff08;count distinct&#xff09;_clickhouse distinct-CSDN博客

stm32-USART通信

什么是usart&#xff1f;和其他通信又有什么区别&#xff1f; 如下图&#xff1a; USART是一种用于串行通信的设备&#xff0c;可以在同步和异步模式下工作。 usart有两根数据线&#xff0c;一根发送线&#xff08;tx&#xff09;一根接收线&#xff08;rx&#xff09;&#x…

2D卷积核处理3D(时序)数据

2D卷积核处理3D&#xff08;时序&#xff09;数据 一、Make A Video的处理方法&#xff08;PseudoConv3d&#xff09;二、Tune A Video的处理方法&#xff08;InflatedConv3d&#xff09;比较与分析相似点不同点结论 Conv2D一般用于处理image&#xff0c;dim一般是4&#xff0c…

准备了一些简单的面试题

当了一次面试官&#xff0c;主要是面试爬虫岗位&#xff0c;具体涉及scrapy爬虫框架和一些数据存储的小问题。具体的问题如下&#xff1a; scrapy框架如何将单机版爬虫改为分布式爬虫【使用scrapy_redis】&#xff0c;具体来讲需要修改哪几个组件的哪些具体部分Spider 1. 如何…

python3 List常用函数详细解释

python中 列表&#xff08;list&#xff09;的copy办法 1.先解决一个报错。 a [1,2,3] b a.copy print( b)报错&#xff1a; AttributeError: builtin_function_or_method object has no attribute copy这是因为a.copy语句并没有执行copy函数&#xff0c;而是把a.copy这个函…

React Antd ProTable 如何设置类似于Excel的筛选框

React Antd ProTable 如何设置类似于Excel的筛选框 目标&#xff1a;在web页面的table表格中完成类似于EXCEL的Filter筛选功能。 示例图&#xff1a;点击标题列上方的漏斗状图标&#xff0c;即可对数据进行筛选。 ProTable 前景提要 ProTable API中有说明&#xff0c;是有…

解决所有终端中文输出乱码的问题

一、系统自带的cmd.exe 以及 Git的bash.exe、sh.exe、git-bash.exe和git-cmd.exe&#xff0c;和PowerShell默认使用“当前系统区域设置”设定好的936 (ANSI/OEM - 简体中文 GBK)语言编码。 1、[当前代码页] 的936 (ANSI/OEM - 简体中文 GBK) 是导致中文乱码的原因 在控制面板→…

网络抓包分析工具

摘要 随着网络技术的快速发展&#xff0c;网络数据的传输和处理变得日益复杂。网络抓包分析工具作为网络故障排查、性能优化以及安全审计的重要工具&#xff0c;对于提升网络管理的效率和准确性具有重要意义。本文旨在设计并实现一款高效、易用的网络抓包分析工具&#xff0c;…

期末测试一

字符数组的排序注意的问题 &#xff1a; 1.对于输入字符的时候 如果给出了要输入几个字符 n >>>>> for ( i 0 ; i < n ;i ) { scanf("%c",&ch); } 如果说直到输入到换行符结束 >>>>>>while ( ch! \ n ) 这个需要额…

CSS|04 复合选择器伪类选择器属性选择器美化超链接

基本选择器&#xff1a;见上篇基本选择器 复合选择器选择器1,选择器2{属性:值;} 多元素选择器&#xff0c;同时匹配选择器1和选择器2&#xff0c;多个选择器之间用逗号分隔举例&#xff1a; p,h1,h2{margin:0px;}E F{属性:值;} 后代元素选择器&#xff0c;匹配所有属于E元素后…

基于长短时记忆网络LSTM的TE过程故障诊断(MATLAB R2021B)

实验所用 TE 仿真过程的数据集是网上公开的数据集&#xff0c;该数据集中的训练集和测试集分别包含 20 种故障工况和一种正常工况数据&#xff0c;其中所采集的每个样本信号包含 41 个测量变量和 11 个控制变量&#xff0c;所以每个时刻采集到的样本有 52 个观测变量。 TE 仿真…

NoSQL之Redis配置与管理

目录 一、关系型数据库和非关系型数据库 1.关系型数据库 2.非关系型数据库 3.关系型数据库和非关系型数据库区别 二、Redis 1.Redis简介 2.Redis 的优点 3.Redis 使用场景 4.Redis的数据类型 5.哪些数据适合放入缓存中&#xff1f; 6.Redis为什么这么快&#xff1f;…