vue前端实战注意事项
1. vue前端实战注意事项
1.1. 预备
1.1.1. Eslint
- 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关闭,需要关闭的地方主要有两个,webstorm自身设置,在settings里搜Eslint,如下
代码里找到webpack.base.conf.js
文件,注掉如下
1.1.2. 接口基地址
- 因为我的基础代码是代码生成器生成,里面有easymock的测试地址,这里需要替换成我们实际项目后台地址,找打
dev.env.js
文件
1.1.3. config/index.js
- 找到
index.js
文件,如果项目在开发阶段,建议devtool: 'source-map'
设置成这样,否则可能会造成你的调试困难
1.2. 权限
- 前后端分离通常要设置权限,也就是用前端来限制访问,不允许不经过登录页就访问其它界面
- 这个由路由的切面来完成,代码如下,提供一种思路
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
if (to.path === '/login') {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) {
store.dispatch('GetInfo').then(res => { // 拉取用户信息
next()
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('验证失败,请重新登录')
next({ path: '/login' })
})
})
} else {
next()
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done() // 结束Progress
})
1.3. token
- token通常有cookie来保存,这里由axios的拦截器来验证token,代码如下
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken,setToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 15000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非200是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 200) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
setToken('')
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
1.4. 后端配置
- 跨域配置加token请求头配置,不配这个会遇到跨域问题和header获取不到问题,特别是这个
Access-Control-Allow-Headers
,你前端header里传的key值需要在这个配置,否则后端接收不到
/**
* filter 接口的自定义实现
*/
@Component
@WebFilter(urlPatterns = "/**", filterName = "corsFilter")
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
// or *
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,X-Token,x-token, Content-Type, " +
"MUserAgent, " +
"MToken, " +
"UID"); // or *
HttpServletRequest request = (HttpServletRequest) req;
if(request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(req, res);
}
}
@Override
public void destroy() {
}
}
vue前端实战注意事项的更多相关文章
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue.js实战——购物车练习(包含全选功能)
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
随机推荐
- pydev离线安装及安装后eclipse中不显示解决办法
eclipse插件安装方法(离线安装)pydev进入eclipse目录1.创建links目录2.复制压缩包到目录前解压3.在links目录下新建pydev.link文件(记事本修改后缀名即可)4.py ...
- IDEA控制台输出中文乱码问题
IntelliJ IDEA 真的是一款很方便的Java开发工具,但是关于中文乱码这个问题我不得不吐槽,这个编码也弄得这么麻烦干嘛,真想找idea开发者干架,我敢打包票我能在一分钟之内一拳飞过去让他跪下 ...
- ES6学习笔记 -- 尾调用优化
什么是尾调用? 尾调用(Tail Call)是函数式编程的一个重要概念,就是指某个函数的最后一步是调用另一个函数. function f(x) { return g(x) } 如上,函数 f 的最后一 ...
- 创建、查看、删除计划任务at命令举例
1.三天后的下午 5 点执行 /bin/ls : at 5pm + 3 days at> /bin/ls 结束按ctrl+d 查看计划任务:at -l 之后 at -c ...
- Intellij Idea 星云常用配置工具箱
1. 软件配置篇 1.1 关闭默认打开最近的工程选项 1.2. 修改快捷键 1.3 修改字体 1.4 创建类模板 效果如下: 1.5 创建接口模板 效果同上 2. 插件篇 1.1 省略Getter a ...
- 剑指offer 6:链表(从头到尾打印链表)
链表的数据结构 struct ListNode { int value; ListNode* next; }; 那么在链表的末尾添加一个节点的代码如下: void insert(ListNode** ...
- manacher算法笔记
模板 [模板]manacher算法 不妨先只考虑如何求长度为奇数的回文串 记\(P[i]\)表示以\(i\)为中心最多向两边扩展几个字符,满足回文 如串\(ababa\), \(P[1]=0,P[2] ...
- Ubuntu下安装配置SQLSERVER2017
摘要自微软官网: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu 安装步骤: 1. 导入公共秘 ...
- Redis NOAUTH Authentication required
redis设置密码后停止服务报错,NOAUTH Authentication required 可以修改/etc/init.d/redis文件中的stop命令 $CLIEXEC -p $REDISPO ...
- k8s删除pod一直处于terminating状态
我这里的pod是与nfs有关,nfs挂载有问题导致pod有问题,执行完删除命令以后看到pod一直处于terminating的状态. 这种情况下可以使用强制删除命令: kubectl delete po ...