时间:2021-05-26
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等
有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等
那如何判断路由是否需要登录呢?就要在路由JS里面做文章
在router.js中添加meta区分
比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false
{ //登录 path: '/login', component: login, meta: { isLogin: false }},{ //注册 path: '/register', component: register, meta: { isLogin: false }},而在首页我们需要登录才能进入,那么我们把meta中的isLogin标志设置为true
{ //首页 path: '/home', component: home, meta: { isLogin: true },}这样我们就为进入各个路由是否需要登录做了区分。
接下来我们在login.vue中修改登录后状态
我们使用axios向后台发起登录请求
this.$axios.post("/xxx/login", {user:name,password:pwd}) .then(data => { //登录失败,先不讨论 if (data.data.status != 200) { //iViewUi的友好提示 this.$Message.error(data.data.message); //登录成功 } else { //设置Vuex登录标志为true,默认userLogin为false this.$store.dispatch("userLogin", true); //Vuex在用户刷新的时候userLogin会回到默认值false,所以我们需要用到HTML5储存 //我们设置一个名为Flag,值为isLogin的字段,作用是如果Flag有值且为isLogin的时候,证明用户已经登录了。 localStorage.setItem("Flag", "isLogin"); //iViewUi的友好提示 this.$Message.success(data.data.message); //登录成功后跳转到指定页面 this.$router.push("/home"); } });Vuex里面我是这样写的(如果项目不需要Vuex,那么直接使用HTML5储存就可以了):
export const store = new Vuex.Store({ // 设置属性 state: { isLogin: false, }, // 获取属性的状态 getters: { //获取登录状态 isLogin: state => state.isLogin, }, // 设置属性状态 mutations: { //保存登录状态 userStatus(state, flag) { state.isLogin = flag }, }, // 应用mutations actions: { //获取登录状态 setUser({commit}, flag) { commit("userStatus", flag) }, }})重点来了~,在mian.js里
这样就已经完成了Vue的登录注册,当用户关闭浏览器或者第二天再次进入网站,用户依旧可以保持着登录的状态直到用户手动退出登录。
Tips:用户退出只需要localStorage.removeItem("Flag")即可
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
cookie登录后同域名下的网站保持相同的登录状态。登录privatevoidSetAuthCookie(stringuserId,boolcreatePers
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到webStorage中进行
天猫精灵的使用方法: 1、为设备接上电源,保持正常开机状态; 2、打开并登录【天猫精灵】APP,点击【我家】-【添加设备】; 3、选择要连接的设备,然后输
首先下载两个模块包session模块包:用于保持登录状态或保持会话状态等。npminstallexpress-session--save-devcookie模块
1.token的使用场景无状态请求保持用户的登录状态第三方登录(token+auth2.0)2.基于token的验证原理后端不再存储认证信息,而是在用户登录的时