vue登录验证

思路：

前端验证

1、路由meta中保存是否需认证字段

//   meta:{
//     requireAuth:true //需要登录验证
//   },

2、使用vue-router的全局前置守卫进入路由前判断该路由是否需要登录验证

router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){ //是否需要登录权限
    ...
  }else{
    next();
  }
});

3、获取缓存（这里使用store）中是否有token字段没有则跳转至登录页面并保存当前请求路径

if(store.state.token){
      next()
    }else{
      next({
        path:'/login',
        query:{redirect:to.fullPath}
      })
    }

4、为处理刷新页面store中数据清除导致每次都得重新登录可以在保存token至store中同时保存一份至localstorage中

new Vuex.Store({
    state: {
        token: null,
      },
      mutations: {
        login: (state,data)=> {
            localStorage.token=data
            state.token=data
        },
        logout: (state,data)=> {
            localStorage.removeItem('token')
            state.token=null
          }
      }
})

5、刷新页面时获取token赋值到store中

//页面刷新，重新设置token
if(window.localStorage.getItem('token')){
  store.commit(types.LOGIN,window.localStorage.getItem('token'))
}

后端验证

1、使用axios请求拦截器在发送请求前判断是否有token有则添加到请求头中无则跳转至登录页面

axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

2、使用axios响应拦截器获取响应前判断token是否失效

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.logout);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });