这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的

gplane 发布于2019-08-26 12:14 / 1274人阅读

摘要：其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。

其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果

在router/index.js中

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
routes: [
    {path:"/", redirect:"/home"},
    {path:"/login",name:"登录",component:resolve =>{require(["@/components/login"],resolve)}},
    {path:"/home",name:"首页",component:resolve =>{require(["@/components/home"],resolve)}}
    ]
})

其中redirect（默认跳转）可以直接写在home页面，刚进入页面直接跳转首页

然后我们在home.vue的周期函数created里面做判断 Login的值状态（Login是在login.vue中localStorage存入的变量，现在我们先读取）

      created() {
            console.log(localStorage.getItem("Login"));
            if(localStorage.getItem("Login")){
                console.log("登录过了");//登录成功了，保留在登录页面   
            }else{
                console.log("没有登录");
                this.$router.push("/login");//没有登录过 返回登录页面
            }
          },

然后我们在login.vue 当用户请求数据成功的时候把Login的状态写入

      axios.post("后台接口",qs.stringify({
                      username:"用户名",
                     password: "密码"
                        }),{
            headers: {//请求头
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept":"application/json"
                }
            }).then((response) => {//成功回调
                if(response.data.status=="200"){//状态正常的时候
                      this.$router.push("/home");
         //存储名字为Login值为true的变量,方便我们在home页面判断是否登录
                      localStorage.setItem("Login",true)
              }
                    }, (error) => {
                        console.log(error);
                    });

如果首页有退出登录按钮，那退出的时候执行

         out(){
                  localStorage.removeItem("Login");//删掉我们存的变量就可以了
                  this.$router.push("/login");//点击退成功按钮返回登录页面
              }

这样就实现了Vue的登陆和注册，用户刷新浏览器，或者关闭在打开都保持登录状态

怎么样是不是很简单呢？

混合云云服务器登陆没有成功登录没有成功简单的登陆asp界面阿里云服务器没有登录成功

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108289.html

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的

摘要：其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果在router/index.js中 import Vue ...

paraller 2019-08-02 11:17 评论0 收藏0
Vue中的验证登录状态

摘要：用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后，拿到token，将token存储到sessionStorage中，并跳转到首...

draveness 2019-08-26 13:33 评论0 收藏0
从前后端分别学习——注册/登录流程2

摘要：昨天研究了网站的注册流程，感兴趣的可以看下从前后端分别学习注册登录流程今天接着研究注册登录流程之登录。为解决这个问题，引入，它是由一组随机数组合的哈希表，当用户登录成功，本来发放给用户，现在变成发放给用户。昨天研究了网站的注册流程，感兴趣的可以看下：从前后端分别学习——注册/登录流程1 今天接着研究注册/登录流程之登录。登录首先来看一下登陆过程：showImg(https://s...

happyhuangjinjin 2019-08-26 12:17 评论0 收藏0
Vue路由

摘要：定义路由创建实例，然后传配置创建和挂载根实例。有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。例如，根据上面的路由配置，这个将会匹配父路由记录以及子路由记录。因此，我们需要遍历来检查路由记录中的字段。 Vue-router(路由) 安装 CDN引入(非打包)： NPM安装(打包)： npm install vue-router 开始使用在使用V...

church 2019-08-21 16:26 评论0 收藏0