学习笔记（css穿透、vue-cookie、拦截器、vuex、导航守卫、token/Cookie、正则校验）

news2024/11/25 2:24:46

目录

一、记录

1、CSS穿透

2、输入框是否提示输入

3、插槽 #slot

4、v-deep深入改掉属性值

1、官方文档

2、使用

三、拦截器

1、请求拦截器

2、响应拦截器

四、vuex对信息存取改

五、路由导航守卫

1、登录思路

2、设置白名单

六、Token与Cookie

1、Token

2、Cookie

七、正则校验

八、跨域

1、环境

2、流程举例

九、vue.config.js文件配置

1、productionSourceMap: false,

2、lintOnSave: process.env.NODE_ENV === 'development',

3、devServer.proxy

一、记录

1、CSS穿透

pointer-events: none;

2、输入框是否提示输入

autocomplete: off;

3、插槽 #slot

template引用的插槽 #slot

4、v-deep深入改掉属性值

当有一些ElementUI原生的样式改不动的时候前面加上

::v-deep 选择器{}

1、官方文档

vue-cookies - npmA simple Vue.js plugin for handling browser cookies. Latest version: 1.8.3, last published: 7 months ago. Start using vue-cookies in your project by running `npm i vue-cookies`. There are 230 other projects in the npm registry using vue-cookies.icon-default.png?t=N7T8https://www.npmjs.com/package/vue-cookies?activeTab=readme

2、使用

（1）安装

npm i vue-cookies

（2）引入

在main.js文件中配置

import VueCookies from 'vue-cookies'
Vue.use(VueCookies, { expires: '7d'})

（3）使用

this.$cookie.set('token',res.data.data)
this.$cookie.get()

（4）代码实例【代码在下面拦截器一起】

获取用户信息，token需要在很多页面判断及使用，因此建议放在request.js文件中

三、拦截器

1、请求拦截器

在request.js文件发送请求前中，先判断是否有token

import axios from "axios";
// cookies要单独引入
import VueCookies from "vue-cookies";

export function request(config) {
  const instance = axios.create({
    baseURL: "http://120.78.172.212:7789",//请求地址前缀
  });
  // 添加请求拦截器
  instance.interceptors.request.use(
    function (config) {
      // 在发送请求之前做些什么
      //   判断是否有token
      if (VueCookies.get("token")) {
        config.headers.Authorization = "Bearer " + VueCookies.get("token");
      }
      return config;
    },
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );

  return instance(config);
}

2、响应拦截器

ins.interceptors.response.use(function(response) {
    return response.data
}, function(error) {
    return Promise.reject(error)
})

①response返回请求结果
②404-没找到not find【路径写错了】
③500-服务器错误，找后端
④401-没权限，一般是没token【没登录】
⑤200-成功

四、vuex对信息存取改

export default new Vuex.Store({
  state: {
    userInfo:{},
  },
  getters: {
  },
  mutations: {
    setUser(state,payload){
      state.userInfo = payload
    }
  },
  actions: {
    getUserApi(context){
      getUserInfoApi().then((res)=>{
        console.log(res.data);
        context.commit('setUser',res.data.data)
      })
    }
  },
  modules: {
  }
})

五、路由导航守卫

1、登录思路

（1）重定向：先进入首页index，这时候要判断是否有token，有则正常跳转，否则跳回login页面

（2）登录前：不允许用户通过改地址跳到其他界面【index页面】，只能停留在login页面

（3）登录后：不允许用户通过改地址跳回登录界面

2、设置白名单

（1）实现登录前，不允许用户通过改地址跳到其他界面

在src文件夹下=》router文件夹=》index.js文件

const whiteList = ['Login','Register']	//在白名单中着不会被拦截

router.beforeEach((to, from, next) => {//全局守卫
  //如果在白名单内，不做任何判断，直接return next()，跳出整个循环
  if(whiteList.includes(to.name)){
    return next()
  }
  if(VueCookies.get('token')){
    store.dispatch('getUserApi')
    next()
  }else{
    next('login')
  }
})

（2）组件路由守卫

实现登录后，不允许用户通过改地址跳回登录界面

const routes = [
  {
    path: "/login",
    name: "Login",
    component: () => import(/* webpackChunkName: "login" */ "@/views/login.vue"),
    // 组件路由守卫
    beforeEnter(to, from, next) {
      if (VueCookies.get("token")) {
        next("/manage");
      } else {
        next();
      }
    },
  },
];

六、Token与Cookie

1、Token

当前用户的标识，由服务端生成。以后客户端只需带上Token请求数据即可；

2、Cookie

①客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
②Cookie存储的数据量有限，且都是保存在客户端浏览器中。
③不同的浏览器有不同的存储大小，但一般不超过4KB。
④因此使用Cookie实际上只能存储一小段的文本信息。跟着请求发送

七、正则校验

登录/注册信息校验

data() {
  //字母开头，长度5-16，允许字母数字下划线
  const regUsername = /^[a-zA-Z]{1}\w{4,15}$/;
  const regPassword = /^[a-zA-Z]{1}\w{5,17}$/;

  // 登录规则
  var validateUser = (rule, value, callback) => {
    if (value === "") {
      callback(new Error("请输入用户名"));
    } else {
      if (!regUsername.test(value)) {
        // this.$refs.ruleForm.validateField("checkPass");
        callback(new Error("字母开头，长度5-16，允许字母数字下划线"));
      } else {
        callback();
      }
    }
  };
  var validatePass = (rule, value, callback) => {
    if (value === "") {
      callback(new Error("请输入密码"));
    } else {
      if (!regPassword.test(value)) {
        callback(new Error("字母开头，长度6-18，允许字母数字下划线"));
      } else {
        callback();
      }
    }
  };
  var validatePassAgain = (rule, value, callback) => {
    if (value === "") {
      callback(new Error("请再次输入密码"));
    } else if (value !== this.registerForm.password) {
      callback(new Error("两次输入密码不一致!"));
    } else {
      callback();
    }
  };

  return {
    // 弹窗显示与否
    dialogLoginVisible: false,
    dialogRegisterVisible: false,
    // 注册框内容
    registerForm: {
      username: "",
      password: "",
      passwordAgain: "",
    },
    // 输入框规则
    rules: {
      username: [{ validator: validateUser, trigger: "blur" }],
      password: [{ validator: validatePass, trigger: "blur" }],
      passwordAgain: [{ validator: validatePassAgain, trigger: "blur" }],
    },
    // 登录/用户名 按钮
    loginUser: "",
    // 注册/退出 按钮
    registerExit: "注册",
  };
},

八、跨域

1、环境

（1）开发环境

# 页面标题
VUE_APP_TITLE = '小米商城（开发环境）'

# 开发环境配置
ENV = 'development'

# 小米商城/开发环境
# 区别会体现在路径上
VUE_APP_BASE_API = '/dev-api'

（2）生产环境【不会出现跨域问题】

# 页面标题
VUE_APP_TITLE = '小米商城（生产环境）'

# 生产环境配置
ENV = 'production'

2、流程举例

本地项目：http://localhost:8080/dev-api/xiaomi/v2/product/hot
devServer=>target：http://www.codeedu.com.cn/dev-api/xiaomi/v2/product/hot
pathRewrite改写=》后端服务器需要的：http://www.codeedu.com.cn/xiaomi/v2/product/hot

九、vue.config.js文件配置

1、productionSourceMap: false,

①加速生产环境构建【项目启动】
②在开发的时候，不需要精确到某一行报错，只需要告知有报错即可

2、lintOnSave: process.env.NODE_ENV === 'development',

①eslint代码规范
②该规范设置为只针对开发环境下
③生产环境下不能一有格式错误，整个项目就不能运行

3、devServer.proxy

当前后端API服务器没有运行在同一个主机上，需要开发环境将API请求代理到API服务器

// webpack-dev-server 服务器 //网络请求的转发  // /dev-api/xiaomi/v2/carousel
  devServer: {
    proxy: {
      // http://localhost:8080/dev-api/xiaomi/v2/carousel
      // 接口带了process.env.VUE_APP_BASE_API这个字段,会被拦截下来 /dev-api
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.TARGET,  //转发TARGET = http://www.codeedu.com.cn
        // http://www.codeedu.com.cn/dev-api/xiaomi/v2/carousel
        //设置是否跨域
        changeOrigin: true,
        //改写,正则,局限devServer
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "", // http://www.codeedu.com.cn/xiaomi/v2/carousel
        },
      },
    },
  },

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

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

相关文章

vue3 集成 tailwindcss

vue3 集成 tailwindcss

tailwindcss 介绍 Tailwind CSS 是一个流行的前端框架，用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类，这些类可以直接应用到 HTML 元素上，从而加速开发过程并提高样式一致性。 主要特点…
阅读更多...
【数据结构与算法】二叉树的实现以及二叉排序数的实现

【数据结构与算法】二叉树的实现以及二叉排序数的实现

目录 通过数组实现二叉树 通过链表实现二叉树 排序二叉树的实现 通过数组实现二叉树 该实现方式只能用于完全二叉树，因为如果是普通二叉数的话，数组中会出现空隙，会导致空间的利用率会降低。 实现思路： 因为假设一个父节点的…
阅读更多...
原码反码补码移码的介绍和计算

原码反码补码移码的介绍和计算

1.原码 原码的定义：十进制数据的二进制表示形式就是原码。 （1）原码的最左边那位是符号位，其他位为数据位，符号位是0则为正数，符号位是1则为负数。 （2）一个byte有8bit，最…
阅读更多...
Node-RED系列教程-25node-red获取天气

Node-RED系列教程-25node-red获取天气

安装节点：node-red-contrib-weather 节点图标如下： 使用说明：node-red-contrib-weather (node) - Node-RED 流程图中填写经度和纬度即可。 演示： json内容： {
阅读更多...
jmeter 请求发送加密参数

jmeter 请求发送加密参数

最近在做http加密接口，请求头的uid参数及body的请求json参数都经过加密再发送请求，加密方式为：ase256。所以，jmeter发送请求前也需要对uid及json参数进行加密。我这里是让开发写了个加密、解密的jar，jmeter直接调用这个…
阅读更多...
CRM系统如何自动分配线索

CRM系统如何自动分配线索

分配线索是销售部门很重要的一项工作，大量的线索中潜藏着许多企业未来的忠实客户。如果将大把的线索通过手工的方式分配给多个销售人员是一件棘手的事，就要借助CRM系统自动分配线索。 你的企业是否也面临这些难题： 1.渠道多线索多&#xff…
阅读更多...
点击、拖拉拽开发可视化大屏，网友直呼不可思议

点击、拖拉拽开发可视化大屏，网友直呼不可思议

可视化大屏既足够炫酷，又能快速整合多业务系统数据，可视化分析数据，是一种可运用于博览中心、会议中心、监控中心、企业大屏看板等场景的常用数据可视化分析形式。但可视化大屏虽然好用，在开发制作上却难倒了不少人，直…
阅读更多...
汇编实现点灯实验

汇编实现点灯实验

.text .global _start _start: 设置GPIOF寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0]ORR R1,R1,#(0x1<<5)STR R1,[R0]设置GPIOE寄存器的时钟使能LDR R0,0X50000A28LDR R1,[R0] 从r0为起始地址的4字节数据取出放在R1ORR R1,R1,#(0x1<<4) 第4位设置为1STR R1,[…
阅读更多...
vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

基于 vue3.x typescript vite naive ui tailwindcss jsx vue-router pinia&#xff0c;项目使用 tsx 作为模版输出&#xff0c;全程没有使用vue提供的SFC&#xff0c; 仿macos桌面前端项目&#xff0c;开源免费模版&#xff0c;希望减少工作量和学习新技术&#xff0c;希…
阅读更多...
javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

//所有的图标用的字符&#xff0c;以后可以换成网上的css-icon图标库的图标&#xff0c;再设置一下css样式即可简单的使用 //这里所有的标签元素都是直接获取&#xff0c;没有使用委托&#xff0c;如果使用委托性能会更好&#xff0c;这里只做了简单的清理&#xff0c;让内存回…
阅读更多...
操作系统对内存的管理：分配与回收，虚拟内存，内存容量的扩充，内存保护，补充（链接方式、装入方式）

操作系统对内存的管理：分配与回收，虚拟内存，内存容量的扩充，内存保护，补充（链接方式、装入方式）

内存&#xff1a;即内存条&#xff0c;也称主存储器&#xff08;简称主存&#xff09;&#xff0c;用于存放数据。 为了缓和CPU和外存&#xff08;磁盘&#xff09;的速度矛盾&#xff0c;外存的程序先放入内存才能被CPU处理。 内存地址从0开始&#xff0c;每个内存地址对应一…
阅读更多...
以太网基础学习（三）——UDP协议

以太网基础学习（三）——UDP协议

一、UDP协议概述 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种无连接协议&#xff0c;它不像TCP协议那样需要在发送和接收数据前进行握手和释放&#xff0c;而是直接把数据发送出去&#xff0c;也不会对数据进行可靠传输和流量…
阅读更多...
ARM_汇编流水灯

ARM_汇编流水灯

ARM_汇编流水灯 .text .global _start _start: 设置GPIOE寄存器的时钟使能ldr r0,0x50000A28ldr r1,[r0] 从r0为起始地址的4字节数据取出存入r1orr r1,r1,#(0x01<<4) 第4位设置为1 表示开启时钟使能orr r1,r1,#(0x01<<5) 第5位设置为1 表示开启时钟使能str r1…
阅读更多...
求推荐好用的可视化大屏软件？强推奥威BI

求推荐好用的可视化大屏软件？强推奥威BI

在博览中心、会议中心、监控中心等场合下&#xff0c;经常看到很多炫酷的企业可视化大屏&#xff0c;将复杂的企业数据可视化展现&#xff0c;高大上、实用性一个不缺。那&#xff0c;可视化大屏做得好的软件有哪些&#xff1f;首推奥威BI软件。 奥威BI软件&#xff1a;零编程…
阅读更多...
ST表(RMQ问题)

ST表(RMQ问题)

ST表能够O(1)地解决区间[l,r]之间最值问题 1.建表&#xff0c;首先明白ST[i][j]&#xff0c;表示的是区间[i, i(1<<j)-1]的最值&#xff0c;区间大小为2^j。首先初始化ST[i][0]a[i]。 void init&#xff08;&#xff09;{for(int i1; i<n; i){ST[i][0]a[i];} } 因为…
阅读更多...
如何配置防火墙？看这篇就够了

如何配置防火墙？看这篇就够了

大家好&#xff0c;我是老杨。 在互联网时代&#xff0c;网络安全的问题不用多说了&#xff0c;配置防火墙是非常必要的。 在网络的世界里&#xff0c;要由防火墙过滤的就是承载通信数据的通信包。 防火墙是位于内部网和外部网之间的屏障&#xff0c;也是系统的第一道防线。…
阅读更多...
06.数据解析-xpath

06.数据解析-xpath

1、什么是xpath ​ XPath (XML Path Language) 是一门在 HTML\XML 文档中查找信息的语言&#xff0c;可用来在 HTML\XML 文档中对元素和属性进行遍历。 W3School官方文档&#xff1a;http://www.w3school.com.cn/xpath/index.asp 2、认识xml 知识点&#xff1a; html和xml…
阅读更多...
如何使用 Xunit 框架进行单元测试和集成测试

如何使用 Xunit 框架进行单元测试和集成测试

在软件开发过程中&#xff0c;测试是至关重要的一环。测试驱动开发&#xff08;Test-Driven Development&#xff0c;TDD&#xff09;是一种常用的开发方法论&#xff0c;它强调在编写代码之前先编写测试用例&#xff0c;然后通过不断迭代的方式来实现功能。为了帮助开发者更好…
阅读更多...
解决项目报错：@org.springframework.beans.factory.annotation.Autowired(required=true)

解决项目报错：@org.springframework.beans.factory.annotation.Autowired(required=true)

项目使用mybatis&#xff0c;启动时报错&#xff1a; Description: Field toolsDetailsService in com.cvit.applet.controller.ToolsDetailsController required a bean of type com.cvit.applet.mapper.ToolsDetailsMapper that could not be found. The injection point has…
阅读更多...
上门按摩小程序｜同城上门按摩软件开发｜上门按摩系统；

上门按摩小程序｜同城上门按摩软件开发｜上门按摩系统；

上门按摩小程序的开发具有许多优势&#xff0c;下面就给大家介绍下按摩小程序功能: 上门按摩小程序的优势 方便快捷&#xff1a;上门按摩小程序提供在线预约服务&#xff0c;用户可以通过手机随时随地预约按摩师上门服务&#xff0c;避免了传统预约方式的繁琐和不确定性。 个性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023