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

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

首先，理清好思路

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

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

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

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


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

   async getToken(){const token = localStorage.getItem(&＃39;token&＃39;);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(&＃39;loaded&＃39;,true);


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

//app.vueexport 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 !== &＃39;/start_page&＃39; && !Vuex.state.login && !Vuex.state.loading){return next(&＃39;/start_page&＃39;);} next();
})


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

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

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

小总结

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