学习笔记-优化问题

LearnTech_123

已于 2024-07-31 09:09:19 修改

阅读量889

点赞数 17

文章标签：学习笔记 vue.js

于 2024-07-31 08:47:22 首次发布

本文链接：https://blog.csdn.net/LearnTech_123/article/details/140799122

版权

一、目前的问题

1、axios

1. axios 请求路径的 url 太长了

2. 请求的 URL 写死的，如果 IP 或者端口需要更改，所有的请求URL都需要修改，比较麻烦

3. axios 获取的数据需要 res.data 才可以，优化为可以直接调用

4. 后端返回的状态有很多，比如400，403，404，500等，这些都需要进行判断，请求数据的页面有多个的话，比如登录页面，注册页面，都需要判断返回的状态，所以需要统一进行判断

5. 在需要用到 axios 的页面都要引入一下 axios，不方便，可不可以只引入一次，全局可用？

2、跨域问题

前端请求的 IP 或端口和后端服务器的 IP 或端口不一致就会出现跨域问题

1. 后端解决：添加 CorsOrigin 注解

2. 前端解决：vue 或者nginx

3. 路由安全

现在的路由跳转可以直接在游览器输入路由的名字进行跳转，这样不够安全

应该是在进入主页面之前先登录，登录成功后才可以跳转到主页面

二、解决问题

1. 跨域问题

2. 优化URL

使用vue 的代理转发解决跨域问题

devServer

1. 配置 devServer

vue 的配置文件

2. 修改请求路径

3. 重启 vue

修改了 vue 的配置文件就需要重新启动一下

4. 测试

可以看到，请求路径多了一个 api ，原本请求路径是没有 api 的，所以后端找不到请求的资源

5. pathRewrite

pathRewrite：这是一个对象，用于定义如何重写请求的URL路径。这里的 ^/api 被重写为 ' '（空字符串），意味着 /api 这部分路径在转发到目标服务器时会被移除。

6. 重启

7. 测试

可以看到请求成功了，请求路径还是有 api 是因为

原本的路径 http://localhost:8080/api/Admin/Login 在经过 pathRewrite 处理后，

会变成 http://localhost:8080/Admin/Login，

然后再被代理到目标服务器 http://localhost:8081/mybatis_war_exploded/Admin/Login

虽然浏览器显示的请求路径仍然是 http://localhost:8080/api/Admin/Login，实际到达服务器的请求路径是 http://localhost:8081/mybatis_war_exploded/Admin/Login

3. 优化 res.data

4. 判断状态码

5. 引入axios

如果请求前缀修改了，那所有的请求路径都需要修改，所以，可不可以写一个公共的方法，baseURL ，只需要在公共方法里修改，所有使用这个前缀的URL都会生效

1. 创建自定义 axios

2. 挂载自定义的axios

那么挂载到哪里可以在全局使用？main.js

3. 使用自定义 axios

删除在页面中引用的 axios

响应拦截器返回的是 res.data ，所以这里可以直接使用 res.xxx，这里的 res = res.data

4. 测试

6. 全局路由守卫

1. 添加路由守卫

在路由器配置文件添加路由守卫

测试

当访问主页面的时候，就会直接提示先登录，然后跳转到登录界面

2. 登录成功后跳转

当登录成功后自动跳转到主页面，如果已经登录，可以直接跳转到主页面

判断是否登录成功

测试

3. 智能跳转

例如：在没登陆之前，在地址栏输入路径跳转到其他组件，此时会先登录，登录成功后自动跳转到之前输入的路径

/**
 * 路由前置守卫，用于在路由跳转之前进行拦截判断
 * @param {Object} to - 将要进入的目标路由对象
 * @param {Object} from - 当前的路由对象
 * @param {Function} next - 前进函数，用于执行下一个路由切换
 */
router.beforeEach((to, from, next) => {
    console.log("to:", to, "from:", from, "next:", next)

    // 白名单
    var whiteList = ["/login", "/register"]
    // 判断要访问的组件是否在白名单中
    var index = whiteList.indexOf(to.path)
    if (index != -1) {
        // 如果在白名单中，直接跳转
        next();
    } else {
        // 从本地存储取出账号信息，判断是否登录成功
        if (localStorage.getItem("account") != null) {

            next();
        } else {
            alert("请先登录")
            localStorage.setItem("redirect",to.fullPath);   // 保存目标路由的完整路径
            next("/login")  // 跳转到登录组件，使用 router.push()方法跳转，需要引入路由器
        }
    }

})