vue前端实战注意事项

时间：2022-12-18 17:25:45

1. vue前端实战注意事项

1.1. 预备

1.1.1. Eslint

  1. 这是个语法检查工具，我用webstorm作为开发的ide，这个语法检查还是太严格了，一个空格啥的都会报错，对新手来讲还是建议关闭，需要关闭的地方主要有两个，webstorm自身设置，在settings里搜Eslint，如下
    vue前端实战注意事项
    代码里找到webpack.base.conf.js文件，注掉如下
    vue前端实战注意事项

1.1.2. 接口基地址

  1. 因为我的基础代码是代码生成器生成，里面有easymock的测试地址，这里需要替换成我们实际项目后台地址，找打dev.env.js文件
    vue前端实战注意事项

1.1.3. config/index.js

  1. 找到index.js文件，如果项目在开发阶段，建议devtool: 'source-map'设置成这样，否则可能会造成你的调试困难

1.2. 权限

  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

  1. 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. 后端配置

  1. 跨域配置加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() {
    }
}
标签：

相关文章