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

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

文章目录

首先，理清好思路
1.什么样的情况下是登陆状态（初始化加载 => App.vue）
2. 没有登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）
3. 登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）
4. 登陆失效的时候要做什么事情（请求响应过期的时候）
核心知识
小总结

首先，理清好思路

什么样的情况下是登陆状态（如有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.vueexport 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？//把登陆状态设置为没有登陆？}

核心知识

项目的生命周期
vuex / 本地存储
路由守卫
axios封装
async await / promise

小总结

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

文章目录

首先，理清好思路
1.什么样的情况下是登陆状态（初始化加载 => App.vue）
2. 没有登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）
3. 登陆的情况下，项目的显示状态是什么（页面的路由=>router>index.js）
4. 登陆失效的时候要做什么事情（请求响应过期的时候）
核心知识
小总结

vue项目登陆逻辑和页面加载逻辑相关推荐

vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...
Centos系统创建用户oracle后，用该用户登陆系统，页面加载报错GConf error
Linux 的 GConf error 解决办法问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...
Vue之鼠标悬停显示页面加载时间
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
终端初始化vue项目报错提示无法加载文件 C：\Users\hp\AppDate\Roaming\npm\vue.ps1。
在学习的路上真的是随处可见"拦路虎",在学各种框架的路上也是. 今天没有用命令行窗口的方式新建vue项目,而是直接在vscode终端执行 vue init webpack 命令,然 ...
vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...

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

文章目录

首先，理清好思路

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

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

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

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

核心知识

小总结

文章目录

vue项目登陆逻辑和页面加载逻辑相关推荐

最新文章

热门文章

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

文章目录

首先，理清好思路

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

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

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

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

核心知识

小总结

文章目录

vue项目 登陆逻辑 和 页面加载逻辑相关推荐

最新文章

热门文章

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

vue项目登陆逻辑和页面加载逻辑相关推荐