vue项目登陆逻辑和页面加载逻辑-CFANZ编程社区

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

文章目录

首先，理清好思路

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

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

封装一个获取登陆凭证（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;
}

这个 data 有点讲究，它可以是有token的，也可以是没有token的，方便下一步进行判断，因此可以现行进行定义, 这样无论有没有成功获取到token都可以进行操作
```
const data = null;
try{
	data = await getToken(); 
}.catch(err=>{})
```

处理 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）

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

//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）

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

//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. 登陆失效的时候要做什么事情（请求响应过期的时候）

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

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