本篇文章带大家了解一下不使用Vuex状态管理，用简单的封装来进行登录状态判断的方法，希望对大家有所帮助！
在项目中肯定会有用户登录状态的判断，所以我们需要封装判断登录状态，用来满足整个项目的应用，当然刚不使用封装的话，会造成耦合度高，代码冗余等结果，在项目中可能常常用到vuex状态管理来进行登录状态的存，那如果项目用不到状态管理，那就可以使用简单的封装来进行登录状态判断。
登录状态封装
我们如果想要普通封装登录状态的话需要两个函数即获取存储的token的getToken和使用token判断是否登录的isLogin,我们需要在src目录下新建一个文件夹，又或者在我们封装请求的文件目录下新建一个auth.js即可。
getToken
获取token的话只需要通过使用localStorage取得token并返回给函数值
exportfunctiongetToken(){returnlocalStorage.getItem("token");}
isLogin
判断登录的话仅仅需要通过调用getToken获得token的值来返回布尔值从而判断用户是否登录
exportfunctionisLogin(){if(getToken()){returntrue;}returnfalse;}
除此之外，项目中还会有别的地方要使用到getToken，比如说在请求头中需要转入token的值等
使用方法
我们在要使用的页面中直接按需引入即可，比如说这里我们只引进isLogin
import{isLogin}from"@/request/auth";
在引入之后，有人就问了，我们判断用if else吗，nonono，低了，隐藏分低了，来看我下面的操作
mounted(){//登录判断，项目成功运行后启动isLogin()?console.log("isLogin"):(console.log("Needtologin"),this.$message.error('未登录'),this.$router.push("/login"));},
注意到这里，我们的登录状态判断的触发位置需要注意一下，一般是在mounted的时候，即一般是在初始化页面完成后的钩子中进行登录状态的判断，这里一般也是页面获取信息的请求函数的位置。
除此之外，我这里的写法是?:，来进行函数触发判断的，正常来讲可能很多人会使用if，对了，这里的提示组件是element，大家可以根据自己组件库的提示来进行不一样的改动。
setToken
既然封装了getToken，那肯定要再封装个setToken，也是为了便捷一些
exportfunctionsetToken(token){returnlocalStorage.setItem("token",token);}
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/34097.html；
