vue-cli3登录

地址：https://github.com/aipdx/vue-cli3-login

登录

1.前端提交用户名密码，后端接收到后验证用户名和密码，验证成功，会返回一个token
2.前端拿到token后，存入cookie和vuex,这里使用的是js-cookie
3.路由配置的时候，给meta字段加一个requireAuth来标记访问时是否需要登录

{
    path: '/login', name: 'login', component: login,
    meta: {
      requireAuth: false
    }
  },

4.每次路由跳转，先判断requireAuth的值，再判断是否有token,没有则跳到登录页

/*路由跳转之前判断*/
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    const token = cookie.get(process.env.VUE_APP_SESSION_KEY)
    if (typeof token !== 'string' || !token) {
      return next('login')
    }
  }
  next()
})

5.增加拦截器，每次获取数据的时候，如果token过期，则要先登录

server.interceptors.response.use(res => {
  const code = _get(res, 'data.code')
  const msg = _get(res, 'data.msg')
  if (code === 50014) { //登录超时
    store.commit('turnOnShowLoginBox') //显示弹窗登录
    return
  }
  if (code !== 1 && code !== 200 & msg) {
    Message.error(msg) //请求错误弹窗错误信息
    return Promise.reject(msg)
  }
  return res.data
},error => {
  return Promise.reject(error)
})

6.注册也是一样的，提交信息获取token,存token