按键修饰符
<input @keyup.enter.native="submit">
<!--
@keyup.enter 表示按回车键时触发
.native 表示keyup是一个原生事件
-->
跨域
在前后端分离项目中, 前端项目和后端接口并不在一个域名下, 当前端项目访问后端接口的时候就会产生跨域, 这是处于开发环境的跨域, 项目部署上线时的跨域是生产环境的
解决开发环境的跨域问题
开发环境的跨域,也就是在 vue-cli 脚手架环境
下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli 为我们在本地开启了一个服务
,可以通过这个服务帮我们代理请求
,解决跨域问题
这就是 vue-cli 配置 webpack的反向代理
// 在 vue.config.js 中配置
module.exports = {
devServer: {
// 代理配置
proxy: {
// 当我们的本地的请求 有/api的时候,就会代理我们的请求地址向另外一个服务器发出请求
'/api': {
target: '跨域请求的地址',
changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域
pathRewrite:{
// 如果后端接口中没有 '/api' 就需要这样配置
'^/api': ''
}
}
}
}
}
// 配置完需要重启服务
生产环境的跨域
生产环境表示项目开发完成, 将项目部署到服务器上, 这时没有 vue-cli 脚手架的辅助, 此时需要借助 Nginx 的反向代理来进行
server{
// 监听9099端口
listen 9099;
// 本地的域名是localhost
server_name localhost;
// 凡是localhost:9099/api这个样子的,都转发到真正的服务端地址
location ^~ /api {
proxy_pass 服务端地址;
}
}
// 一般运维完成
处理 axios 的响应拦截器
axios 发送请求响应回的数据经过响应拦截器判断, 失败了则提示错误, 返回 reject , 成功了则结构数据为 success、message、data 。如果success 为 true,返回data,如果为 false,提示错误,返回reject
service.interceptors.response.use(response => {
// axios默认加了一层data
const { success, message, data } = response.data
// 要根据success的成功与否决定下面的操作
if (success) {
return data
} else {
// 业务已经错误了 还能进then ? 不能 ! 应该进catch
Message.error(message) // 提示错误消息
return Promise.reject(new Error(message))
}
}, error => {
Message.error(error.message) // 提示错误信息
return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})
主页的 token 拦截处理
访问权限拦截先会判断是否有 token
有 token 时,判断是否为登录页,是则跳到主页,否则放行通过
没有 token 时,判断是否在白名单中,是则放行通过,否则跳到登录页
const whiteList = ['/login', '/404'] // 定义白名单 即所有不受权限控制的页面
// 路由的前置守卫
router.beforeEach(function(to, from, next) {
// 首先判断有无token
if (store.getters.token) {
// 如果有token 继续判断是不是去登录页
if (to.path === '/login') {
// 表示去的是登录页
next('/') // 跳到主页
} else {
next() // 直接放行
}
} else {
// 如果没有token
if (whiteList.includes(to.path)) {
// 如果找到了 表示在在名单里面
next()
} else {
next('/login') // 跳到登录页
}
}
})