导航守卫前端跨域 文件上传

回顾

路由
 1 地址和组件的映射
 2 路由mode:hash和history
 3 理由配置 router/index.js
 	const routes=[
 		{
 			path:"",
 			component:,
 			children:[],
 			redirect:"",
 			alisas:'',
 			meta:{},
 			name:""
 		}
 	]
  4 元信息 meta  :设置标记,能够在对应的组件或者父组件使用获取,继而实现自己的业务
  5 $router和$route

补充：路由的name属性

作用：跳转

使用：

1 router/index.js:

{
    path:"/stu",
    name:"xx",
    component:Stu,

2 组件：

<router-link :to="{name:'xx',query:{}}">跳转</router-link>

导航守卫

概念

类似于一个拦截器，拦截路由跳转
只要路由发生跳转，就能够自动触发守卫的拦截
所谓的守卫就是我们自己定义函数，路由跳转---》触发自己的函数----》实现自己业务（该业务中是有资格判断路由跳转是否放行）

场景：

权限控制等

分类

1 全局守卫，我们学习全局前置守卫
2 路由独享守卫
3 组件内守卫，我们学习离开组件前的守卫

1 全局前置守卫

位置：router/index.js,写在new VueRouter()后面

//全局前置守卫
router.beforeEach((to,from,next)=>{
   //to  目标
   //from  源目标
   console.log(to.path,from.path);
   //放行：
   next()
   //重定向到新目标：
   next("/xxx")

})

Demo:

只要是路由跳转，都被拦截（除了login和register）,拦截后判断是否有token，如果有则放行，没有就滚回到登录界面

//全局前置守卫
router.beforeEach((to, from, next) => {
  console.log(to.path, from.path);
  //去往的是登录和注册路由直接放行
  if (to.path == "/login" || to.path == "/register") {
    next()
  } else {
    if (localStorage.token) {
      next();
    } else {
      // next("/login")
      router.push("/login")
    }
  }
})

解决重复路由的报错问题（不影响程序执行）

//写在Vue.use(VueRouter) 的上面
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}




Vue.use(VueRouter)

2 路由独享守卫

该守卫只服务于指定的路由
配置后，自由跳转该路由才会被守卫拦截

  {
    path: "/stu",
    name: "xx",
    component: Stu,
    beforeEnter(to, from, next){
        console.log(to.path,from.path);
        // next()
    },

3 组件内守卫(离开组件前触发的那个守卫)

当离开该组件时触发守卫的拦截

export default {
    name:"add",
    beforeRouteLeave(to,from,next){

    }
}

Demo：

当离开StuAdd组件时判断文本框是否有内容，如果有则提示客户确定离开吗，如果没有则直接放行

    beforeRouteLeave(to,from,next){
        if(this.t){
            let res=confirm("文本框还有内容未提交，是否要离开")
            if(res){
                next()
            }
        }else{
            next();
        }
    }

axios的封装

axios可以设置拦截器:
	拦截请求  ：能够在你发送ajax之前拦住，挂载heads ：Authorization:token
	拦截响应  : ajax接受到数据后渲染之前拦住， 过滤结果，
		1 比如过滤掉res.data,那么以后在组件中的res就能够直接点出返回的数据和code
		2 处理后端报错问题，比如401等

axios.js:

import axios from 'axios'
import router from '../router'

let newaxios=axios.create({
    baseURL:"http://localhost:3000",
    timeout:3000
})

//拦截响应
newaxios.interceptors.response.use(config=>{
    //return代表放行
    //过滤
    return config.data
},err=>{
    //处理异常
    if(err?.response?.status==401){
        alert("请登录")
        router.push("/login")
    }
   
})

//拦截请求
newaxios.interceptors.request.use(config=>{

    //挂载token到请求头
    config.headers.Authorization=localStorage.token
    
    //一定要放行，不放行，任何的ajax都发不出去
    return config;

},err=>{
    return err
})
 

//暴露
export default newaxios

文件上传

后端：

multer插件

前端：

   <input type="file" @change="upload_temp"  >  
   
   //预上传
    async upload_temp(e){
       let file= e.target.files[0];
       console.log(file);
       let fd=new FormData();
       fd.append("file",file)
      let res=await  this.api.stus.upload_temp(fd)
      console.log(res);
      if(res.code==200){
        //回显
        this.src=`http://localhost:3000/temp/${res.file.filename}`
      }
    },

Vue配置文件vue.config.js

、

该文件类似于之前学过的webpack.config.js

1 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  //兼容ie配置
  transpileDependencies: true,
  //配置路径,防止打包后的引入的文件找不到的文通
  publicPath:"./",
  //不会产生map文件(该文件可以追溯源码，用于查找报错的代码行的)
  productionSourceMap:false,
  //路径的别名(我们可以用一个变量来代替某一端路径)
  configureWebpack:{
    resolve:{
      alias:{
        //别名:"路径"  主要用于import 导入某个文件
        "xxx":"@/components/stu"
      }
    }
  }
})

2 分组打包js

面临一个问题：

每多个一个懒加载的路由配置，则打包之后的js文件个数就会多一个
从性能上来将，文件个数越多，性能就越低

解决：

把懒加载的组件进行分组，解决打包之后文件数量多的问题


let StuList = () => import(/*webpackChunkName:'group-s'*/'../components/stu/StuList.vue');
let StuAdd = () => import(/*webpackChunkName:'group-s'*/'../components/stu/StuAdd.vue');

前端跨域 devServer

  //跨域
  devServer: {
    //代理
    proxy: {
      //标记
      "/api": {
        //代理的地址
        target: "http://localhost:3000",
        //重新路径（能够处理后端的第一级路由随时发生变更的问题）
        pathRewrite:{
          "/api":""
        }
      },
    }
  }