地址：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
