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

目录

一、记录

1、CSS穿透

2、输入框是否提示输入

3、插槽 #slot

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

二、vue-cookie

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 选择器{}

---

二、vue-cookie

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.https://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
        },
      },
    },
  },