Vue2-黑马(十三)

news2024/11/15 11:06:24

目录:

(1)实战-permissions.js-动态路由

(2)实战-第三方登录-流程分析

(3)实战-第三方登录-代码解读


(1)实战-permissions.js-动态路由

在做根据用户角色动态生成路由:

 动态生成路由和菜单我们前面已经讲过,但是我们这个框架跟前面将的不一样的,对应的代码:

我们以前用户的路由信息和菜单信息是存在用户的一张表里,,我们直接把它查出来,返回给前端,前端直接用了就可以啦,现在这个是,数据库只存储了用户对应什么角色,路由信息并不是存在数据库里,路由信息还是保存在前端 ,有前端管理

 

 上面是基本的路由:首页,文档,引导页,大家都能看到的

还有一些是跟权限有关的所有路由:

 meta:路由的一些额外信息:roles:指定角色

 

 

 上面是把所有的路由信息保存在客户端啦,服务器呢,只给你返回角色,然后再根据角色去筛选你这个显示的路由

使用admin用户会看到所有菜单:

admin可以看到所有的菜单: 

 张三用户是edit:对应的路由

 都能看到的路由:hidden属性:表明会不会在菜单中展示出来,比如登录、404、404呀这些鱼油不会子啊压面展示出来

根路径:主页:/  没有hiden属性,所以需要在主页展示出来   文档: /documentation 也没有hidden  会在显示

 

 

 (2)实战-第三方登录-流程分析

这里我们没有使用微信,因为微信认证通过,需要重定向后端服务器地址,这个地址是一个公网的地址。为了减轻麻烦,我们选用码云和Github,它俩不要求地址是公网的

通过地方方登录,可以减轻登录门槛         

点击码云:

点击授权,会从gitee登录后重定向后台的8080服务器上,跳转是使用了浏览器的重定向方式进行跳转,第三方服务器在重定向的时候,携带一个参数叫做code,后端复服务器收到code值,就会知道在gitee上完成登录,然后会调用gitee的api获取用户的信息,比如说用户名是什么,头像等等

 访问gitee需要先获取那端tocken,然后通过access_tocken才能正确访问获取信息

 (3)实战-第三方登录-代码解读

登录按钮:@click=“showDialog=true”把属性改为true

 登录框:sync:作用是把对话框改为false

 

 social-sign:引入新组件,引入,作为component组件进行注册

 组件页面:自定义组件SocialSignin

 首先需要建立8080根gitee的信任关系,返回一个client_server

点击设置 

 选择第三方应用

 创建第三方应用:

 

 

创建成功后生成:

client ID:在码云上的唯一标识

Client Sercet:配合code获取访问令牌

 前端的访问:

点击授权gitee就会授权通过,跳转到后台8080:使用HttpClient发送请求。

 

 

 

 

 把信息保存在自己的数据库中一份,并生成JWT令牌返回传给9527前端

 gitee返回用户信息后,后端8080,再生成一个新的tocken工前端使用,并传送给前端

新窗口发送老窗口的tocken的代码:

发送时会产生跨域问题,怎么解决?加一个参数地址

 

 

 前端页面的收到消息代码:

data:包含可tocken 

 

 前端获取到tocken之后进行存储,跳转到首页,window.location  :获取地址栏对象

 

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

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

相关文章

【Unity+MySQL】实现注册登录系统(升级版)

目录 1 UI界面重新设计1.1 注册界面1.2 登录界面1.3 交互实现 2 注册功能完善2.1 判断用户输入的用户名是否与数据库中的重复2.2 将当前时间更新至用户表的当前注册时间列2.3 将用户输入的注册密码使用哈希加密 3 登录功能完善 接着 上篇文章所谈到的系统缺陷,这篇…

==与equals()的理解

java中的数据类型分为基本数据类型、基本数据类型对应的包装类型(引用类型),引用类型三种数据类型。 每一个基本类型java都提供了一个与之对应的包装类型,该包装类型是一个引用类型,并且在基本类型与包装类型之间提供了自动拆箱和…

AD21原理图----网络连线(网络线、网络标签、总线、差分对、信号线束)

目录 网络连线 网络线(Wire) 网络标签 总线 差分对 信号线束 网络连线 网络线(Wire) 网络标签 可以跨原理图 总线 用于放置同一类数据 使用步骤 第一步:先绘制网络线 第二步:利用网络标签进行连接&a…

虚拟机下Ubuntu系统的Docker部署

虚拟机下Ubuntu系统的微服务项目Docker部署 文章目录 虚拟机下Ubuntu系统的微服务项目Docker部署1、Ubuntu安装 Docker2、修改后端微服务的配置2.1 修改 MySQL 的配置2.2 修改 Redis 的配置2.3 修改 Nacos 的配置 3、生成微服务镜像4、拉取远程镜像5、生成前端镜像5.1 准备文件…

MacOS安装MongoDB与Redis

1.安装MongoDB: brew tap mongodb/brew brew install mongodb-community 后台服务方式运行mongodb: brew services restart mongodb/brew/mongodb-community 直接运行mongodb非后台服务 /usr/local/opt/mongodb-community/bin/mongod --config /usr/local/etc/mongod.con…

化工行业数字化“智能工厂”-解决方案(ppt可编辑)

本资料来源公开网络,仅供个人学习,请勿商用,如有侵权请联系删除。 总体架构 设计理念—数据集成与流转 九大核心价值之一 九大核心价值之二 九大核心价值之三 九大核心价值之四 九大核心价值之五 九大核心价值之六 九大核心价值之七 九大核心…

数据库学习-常用的SQL语句

背景: 汇整一下自己学习数据库过程中常见的题目及语句。 一.实例分析题 二.简单SQL查询: 1):统计每个部门员工的数目select dept,count(*) from employee group by dept;2):统计每个部门员工的数目大于一个的记录se…

3.4 迭代法

4.1 雅克比迭代法: 雅可比迭代法是一种用于求解线性方程组的迭代算法,其基本思想是将线性方程组中的系数矩阵拆分为对角线矩阵和非对角线矩阵两部分,并利用对角线矩阵的逆矩阵来迭代求解方程组。 具体地,设线性方程组为Axb&…

操作系统笔记--虚拟内存的使用

1--背景概念 在计算机系统中,当多道程序同时运行时可能会出现内存不足的情况,一般可通过以下技术进行解决: 覆盖技术: 当程序太大超出内存容量时,可以采用手动覆盖的技术,只把需要的指令和数据保存在内存当…

SSM整合、环境配置以及基础综合测试(单表查询、多表查询和数据分页、前后端分离、Vue3)

SSM整合、环境配置以及基础综合测试 准备:创建maven项目以及项目框架准备 SSM整合简介 介绍: SSM(SpringSpringMVCMyBatis) 整合,就是三个框架协同开发。Spring整合Mybatis就是将Mybatis核心配置文件当中数据源的配置、事务处理、以及工厂的配置&…

Docker的使用说明

目录 第一章什么是Docker 1.1.Docker的概述 1.2.什么是容器 1.3.Docker核心概念 第二章.安装 Docker 2.1.安装环境部署 2.2.安装 Docker-CE并设置为开机自动启动 2.2.Docaker的简单信息查看 第三章.Docker 操作 3.1.Docker的镜像操作 3.2.Docker 容器操作 3.3.容器…

Baumer工业相机堡盟工业相机如何联合BGAPISDK和佳能EF变焦镜头实现相机的自动变焦(C#)

Baumer工业相机堡盟工业相机如何联合BGAPISDK和佳能EF变焦镜头实现相机的自动变焦(C#) Baumer工业相机Baumer工业相机BGAPISDK中控制变焦镜头的技术背景代码案例分享第一步:开启相机自动调焦功能模块第二步:控制自动变焦镜头电机的…

Delphi DataSnap 流程分析(二)

Delphi DataSnap 流程分析(一)_看那山瞧那水的博客-CSDN博客 粗略分析了 创建传统DataSnap的流程,现在再分析下创建现在更常用的 方式: DataSnap REST Application 这种方式只支持HTTP(普通HTTP和REST HTTP)通信,不支持TCP通信。 这种方式…

详解C语言string.h中常见的13个库函数(上)

我计划讲解C语言string.h这个头文件中,最常见的13个库函数。为了让大家更加深入的理解这些函数,部分函数我会模拟实现。篇幅所限,如果文章太长了,可能会较难坚持读完,所以我会分几篇博客来讲述。本篇博客主要讲解的函数…

什么是全民开发?|概念、技能和优势

注:全民开发的英文是Citizen Development,由咨询公司Gartner在2010年提出的概念,指非专业开发人员使用低代码或无代码平台创建应用程序,无需IT部门的支持,旨在提高生产力并降低开发成本。 国内普遍将Citizen Developme…

【ROS】单目摄像机的标定

在上节: ROS 教程之 vision : 用笔记本摄像头获取图像 能够使用相机后&#xff0c;就需要对相机进行标定&#xff0c;在ROS上使用原始图像校准单目相机。 操作步骤 1、首先将catkin_ws/src/usb_cam/launch/usb_cam-test.launch的文件内容修改掉。 原有内容&#xff1a; <…

docker 使用Dockerfile 部署springboot项目

1、先准备好你的springboot项目jar包。拉取 openjdk docker pull openjdk:8-jdk-alpine 2、上传你的springboot项目&#xff0c;然后配置 Dockerfile&#xff1a; FROM openjdk:8-jdk-alpine ADD ./springbootstudy.jar.jar /app.jar ENTRYPOINT ["java","-jar…

【源码】Spring Cloud Gateway 是在哪里匹配路由的?

我们知道&#xff0c;经过网关的业务请求会被路由到后端真实的业务服务上去&#xff0c;假如我们使用的是Spring Cloud Gateway&#xff0c;那么你知道Spring Cloud Gateway是在哪一步去匹配路由的吗&#xff1f; 源码之下无秘密&#xff0c;让我们一起从源码中寻找答案。 入…

Ant Design 常见用法与坑点总结(二):Form 表单下拉框设置初始值

前言 Ant Design 是蚂蚁出品的出色优秀的 React 组件库&#xff0c;相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。 因此&#xff0c;了解 Ant Design 的常见用法与坑点还是有…

react中如何系统化的处理时间操作?

在 Web 开发中&#xff0c;我们经常需要处理日期和时间的格式化。 在 React 中&#xff0c;这个过程变得更加容易和直观&#xff0c;因为我们可以使用一个叫做 moment 的 npm 包来帮助我们完成这个任务。 什么是 Moment? Moment.js是一个JavaScript库&#xff0c;用于处理日…