vue项目 登陆逻辑 和 页面加载逻辑

最近修改了俩个vue项目登陆逻辑，摸摸摸，三改四改，总结了一些思路：

首先，理清好思路

1. 什么样的情况下是登陆状态（如有token）
2. 没有登陆的情况下，项目的显示状态是什么（如不可进入什么页面）
3. 登陆的情况下，项目的显示状态是什么（可以进入什么页面，不可进入什么页面）
4. 登陆失效的时候要做什么事情（请求响应过期的时候）

1.什么样的情况下是登陆状态（初始化加载 => App.vue）

1. 封装一个获取登陆凭证（token）的函数，或者一个js文件，只是获取，返回 token

   //异步请求
   const data = await getToken(); 
   //如果没有接收到值，下面是不会执行的
   

   如果只是需要取本地的token(const token = localStorage.getItem('token'))一行代码，那可能不需要；
   但是如果涉及到其他的操作，最好就进行封装。
   有条件可以判断token的有效以及更新token，减少token过期的几率

   async getToken(){
   	const token = localStorage.getItem('token');
   	const data = null;
       if(token){
          // console.log("有本地token，检查token是否有效,有效返回新的token");
          try{
              data = await checkToken(token);
          } catch(err){
          }
      }
      return data;
   }
   

2. 这个 data 有点讲究，它可以是有token的，也可以是没有token的，方便下一步进行判断，因此可以现行进行定义, 这样无论有没有成功获取到token都可以进行操作

   const data = null;
   try{
   	data = await getToken(); 
   }.catch(err=>{})
   

3. 处理 data

   if(data){
   	//data有值，登陆成功操作
   	//取出token存储本地？
   	//跳转首页？
   	//定义一个变量表示本系统登陆成功？
   }else{
   	//登陆失败
   	//跳转登陆页？
   	//修改 变量表示本系统登陆失败？
   }
   

4. 结束初始化加载：定义一个变量来记录项目的加载情况，不一定要，但有利于路由的跳转控制

//方法1.vuex
this.SET_LOADEDSTATUS(true);
//方法2.本地存储
localStorage.setItem('loaded',true);

一整个初始化加载的逻辑就结束了，当项目创建的时候开始执行，总结：

//app.vue
	export default {
    data(){
        return{
        }
    },
    methods:{
    },
    async mounted(){
    //项目加载完成
    //1.获取登陆凭证
    //2.判断是否有凭证，以及进行相应操作
	}
}

2. 没有登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）

1. 在上一步的加载过程中，如果没有登陆，跳转的是登陆页。
2. 接下来需要考虑，如果不是在加载的情况下，用户自行输入其他页面的链接，是否可以进入？
   
3. 也就是说，在没有登陆的情况下，到底哪些页面不可以进入，要进行拦截，这里我用到了路由守卫

//router > index.js
// 一个路由守卫,判断是否要去登陆页
router.beforeEach((to, from, next) => {
	//没有登陆，不是进入登陆页，加载完成 的情况下 ：只能去登陆页
  if(to.path !== '/start_page' && !Vuex.state.login && !Vuex.state.loading){
  	return next('/start_page');
  } 
  next();
})

3. 登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）

1. 同样的道理，如果用户在登陆的情况下，要去登陆页，你是否让他去，是否要做什么操作

//router > index.js
// 一个路由守卫,判断是否要去登陆页
router.beforeEach((to, from, next) => {
	//没有登陆，不是进入登陆页，加载完成 的情况下 ：只能去登陆页
  if(to.path !== '/start_page' && !Vuex.state.login && Vuex.state.loading){
  	return next('/start_page');
  } 
  //登陆，要进入登陆页，加载完成 的情况下 ：不让去登陆页
  if(to.path === '/start_page' && Vuex.state.login && Vuex.state.loading) {
  	return next('/home');
  }
  next();
})

总结：看个人需求进行操作

4. 登陆失效的时候要做什么事情（请求响应过期的时候）

1. 在axios请求的时候响应登陆过期的情况，此时token已经没有用了，在拦截器统一处理接下来的操作，比如说，跳转到登陆页，删除掉原来存储的token，把登陆状态设置为没有登陆

axios.interceptors.response.use(async config => {
  if(config.data.code === 401) {
	//登陆过期，要确保此时确实是登陆凭证过期了需要重新登陆，而不是其他的网络故障等报错
	//跳转到登陆页？
	//删除掉原来存储的token？
	//把登陆状态设置为没有登陆？
	}

核心知识

1. 项目的生命周期
2. vuex / 本地存储
3. 路由守卫
4. axios封装
5. async await / promise

小总结

方法可能不太对，也是自己瞎摸摸摸出来的，有什么不对的或者更好的欢迎指正。
之前写项目，到最后总是因为登陆逻辑写不好，导致漏洞百出，各种问题出现，前期的封装工作真的要处理好，要不然后期简直给自己找罪受。