关于vue登录、注册、保持登录状态是vue玩家的必经之路。网上也有很多解决方法，但是有些太复杂了，新手可能看着一头雾水，下面给大家介绍一个我在自己写项目中使用的方法，不难理解。项目中有些路由需要登录才能进入，比如首页、个人中心等，有些路由不用登录也可以访问，比如登录页面、注册页面、忘记密码等。如何判断路由是否需要登录？？需要在路由JS上做文章，在router.js中添加meta区分，比如登录注册页面。不登录也可以进入，那么我们把meta中的isLogin标志设置为false{//loginpath:'/login',component:login,meta:{isLogin:false}},{//Registrationpath:'/register',component:register,meta:{isLogin:false}},而在首页我们需要登录才能进入,然后我们把meta中的isLogin标志设置为true{//首页路径:'/home',component:home,meta:{isLogin:true},}这样我们就可以区分进入每条路由是否需要登录。接下来我们修改login.vue中的登录状态。我们使用axios向后台发起登录请求this.$axios.post("/xxx/login",{u??ser:name,password:pwd}).then(data=>{//登录失败，先不讨论if(data.data.status!=200){//iViewUi的友好提示this.$Message.error(data.data.message);//登录成功}else{//设置Vuex登录标志为true，defaultuserLoginisfalsethis.$store.dispatch("userLogin",true);//VuexuserLogin在用户刷新时会返回默认值false，所以我们需要使用HTML5存储//我们设置一个名为Flag的字段其值为Login，如果Flag有值且为Login，则证明用户已登录。localStorage.setItem("标志","isLogin");//iViewUi友情提示this.$Message.success(data.data.message);//登录成功后跳转到指定页面this.$router.push("/home");}});我在Vuex中是这样写的（如果项目不需要Vuex，那就直接用HTML5存储）：exportconststore=newVuex.Store({//设置属性state:{isLogin:false,},//获取state属性getters:{//获取登录状态isLogin:state=>state.isLogin,},//设置属性状态mutations:{//保存登录状态userStatus(state,flag){state.isLogin=flag},},//Applymutationsactions:{//获取登录状态userLogin({commit},flag){commit("userStatus",flag)},}})重点来了~,inmian.jsrouter.beforeEach((to,from,next)=>{//获取用户登录成功后存储的登录标志letgetFlag=localStorage.getItem("Flag");//如果登录标志existsisLogin,即用户登录if(getFlag==="isLogin"){//设置vuex登录状态为登录store.state.isLogin=truenext()//如果已经登录后，要进入登录注册界面，然后重定向回首页if(!to.meta.isLogin){//iViewUi友情提示iView.Message.error('请先退出')next({path:'/home'})}//如果登录标识不存在，即没有登录}else{//用户要进入需要登录的页面in，然后重定向回登录界面if(to.meta.isLogin){next({path:'/login',})//iViewUi友好提示iView.Message.info('请先登录')//用户进入不需要登录的界面，然后跳转到continue}else{next()}}});router.afterEach(route=>{window.scroll(0,0);});这样就完成了Vue的登录注册，当用户关闭浏览器或者第二天再次进入网站时，用户仍然可以保持登录状态，直到用户手动注销。提示：用户只需要使用localStorage.removeItem("Flag")退出即可。
