Vue登录注册并保持登录状态的方法

关于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里

router.beforeEach((to, from, next) => {

 //获取用户登录成功后储存的登录标志
 let getFlag = localStorage.getItem("Flag");

 //如果登录标志存在且为isLogin，即用户已登录
 if(getFlag === "isLogin"){

  //设置vuex登录状态为已登录
  store.state.isLogin = true
  next()

  //如果已登录，还想想进入登录注册界面，则定向回首页
  if (!to.meta.isLogin) {
    //iViewUi友好提示
   iView.Message.error('请先退出登录')
   next({
    path: '/home'
   })
  }

 //如果登录标志不存在，即未登录
 }else{

  //用户想进入需要登录的页面，则定向回登录界面
  if(to.meta.isLogin){
   next({
    path: '/login',
   })
   //iViewUi友好提示
   iView.Message.info('请先登录')
  //用户进入无需登录的界面，则跳转继续
  }else{
   next()
  }

 }

});

router.afterEach(route => {
 window.scroll(0, 0);
});

这样就已经完成了Vue的登录注册，当用户关闭浏览器或者第二天再次进入网站，用户依旧可以保持着登录的状态直到用户手动退出登录。

Tips：用户退出只需要localStorage.removeItem("Flag")即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • Vue 使用beforeEach实现登录状态检查功能

    使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求. 1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中. 2.使用beforeEach实现登录状态检查 vueRouter.beforeEach((to, from, next) => { //store的getters中定义获取用户信息的函数 getUser //userId为空说明用户未登

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • 在VUE中实现文件下载并判断状态的方法

    新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func

  • Vue登录注册并保持登录状态的方法

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等 有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等 那如何判断路由是否需要登录呢?就要在路由JS里面做文章 在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置

  • android实现简易登录注册界面及逻辑设计

    android实现简易登录注册界面及逻辑设计

    本文实例为大家分享了android实现登录注册界面及逻辑设计,供大家参考,具体内容如下 1. 第一步 新建文件(相信各位码农一定会这一步)略. 2. 第二步 登录注册界面设计 登录界面主要包括几大控件,如登录.注册按钮,账号(Button).密码输入框(Editext).复选框等.可以利用shape参数对控件进行美化.界面设计可以线性布局嵌套使用,这样可以很好的对控件调整,美化界面. 注册界面主要包括EdiText.Radio button.button.checkbox等,与登录界面相同,可以

  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    目录 整体框架 1. 前端页面授权 2. 实现注册页面 3. 实现登录状态的持久化 优化前端 整体框架 1. 前端页面授权 当我们登录网站的时候,如果没有登录,强制让用户重定向到 登录界面 在 router 目录下的 index.js 文件下实现. router -> index.js import store from '../store/index' // 把一些额外信息放到一个额外的域里面,meta信息里面存一下是否要授权,如果需要授权而且没有登录,重定向到登录页面,重定向到登录界面. c

  • VUE实现注册与登录效果

    VUE实现注册与登录效果

    本文实例为大家分享了VUE实现注册与登录效果的具体代码,供大家参考,具体内容如下 1.效果展示 2.注册效果实现 <template> <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model=

  • Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    目录 前言 一.实现效果 二.实现步骤及涉及要点 三.涉及代码 总结 前言 在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果 实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登

  • Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码

    根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

  • vue+Element-ui实现登录注册表单

    本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码,供大家参考,具体内容如下 登录注册表单验证 通过Element-ui的表单实现登录注册的表单验证 效果图如下 注册 登录表单 登录的实现,需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求 // 登录表单验证的代码 // template的代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

随机推荐