Vue2.0一个login跳转实例

ninefive 发布于2019-08-20 14:45 / 3628人阅读

摘要：请输入正确的用户名和密码接下来是这个页面很简单，简单的写一些内容作为测试是否登录跳转成功。路由拦截中判断对象是否为空。

需要解决的问题：
store存储登录状态
Vue-Router导航钩子拦截路由
Vue-Resource获取后台的数据
需要判断登录返回的user
源码参考
原文地址

主要技术栈：Vuex + Vue-Resource + Vue-Router
后台用mock-data来模拟数据。

先来看一下效果图

第一步、起个项目打开控制台输入

$ npm install --global vue-cli#创建一个自己的基于webpack的新项目
$ vue init webpack my-project(这里是你自己的工程名)
$ cd my-project(进到你的工程文件夹下)
$ npm install (安装依赖)
$ npm run dev

注意：起工程的时候回让你选择ESLint,Test等等各种测试，这里都默认选no就可以。

现在你的项目应该跑起来了。打开控制台输入npm run dev
应该是这样的。

好了起项目成功了，接下来撸起袖子加油干吧。
先来看一下项目结构:

第二步、配置一下mock-data。

{
    "users": [
        {
            "id" : 1,
            "username": "aaa",
            "password": "aaa"
        },
        {
            "id" : 2,
            "username": "bbb",
            "password": "bbb"
        },
        {
            "id": 3,
            "username": "ccc",
            "password": "ccc"
        }
    ]    
}

这里给指定了三个用户名和密码，在login登陆的时候只有输入正确的用户名和密码才可以登陆实现页面的跳转。
第三步配置view视图层Login.vue文件中

接下来是Main.vue ,这个页面很简单，简单的写一些内容作为测试是否登录跳转成功。

下面来配置一下路由。routes.js

//先引入需要路由的文件
import Main from "../components/Main"
import Login from "../components/Login"

export default [
        {
            path: "/login",
            component: Login
        },
        {
            path: "/main", 
            meta: {
                // 添加该字段，表示进入这个路由是需要登录的
                 requireAuth: true,  
                },           
                component: Main,

        }
    ]

接下来是main.js(这里只对重点拿出来细说)

// 全局导航钩子
 router.beforeEach((to, from, next) => {
     // 判断该路由是否需要登录权限
     if (to.meta.requireAuth) {
         // 通过vuex state获取当前的token是否存在
         // console.log(isEmptyObject(store.state.user)) 
         if(!isEmptyObject(store.state.user)) {   
             next();
         }
         else { 
             next({
                 path: "/login",
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
         }
     }
     else {
         next();
     }
 })


 function isEmptyObject(obj) {
     for (var key in obj) {
         return false;
     }
     return true;
 }

重点参考链接
路由拦截导航。路由拦截
JavaScipt中判断对象是否为空。点击这里

存在的问题及待解决的问题：登陆数据存在store中，每次刷新页面都会没有了。接下来要用LocalStorage或者Cookie来保存数据。

源码参考
原文地址

欢迎大神纠察指正，也希望前端爱好者提出宝贵意见，一起学习，一块交流讨论。喜欢的话请点个赞吧。（感谢阅读）

GPU云服务器云服务器 vue2.0 cdn js页面跳转实例跳转到另一个php 域名跳转到另一个域名

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

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

vue2.0+axios+mock+axios-mock+adapter实现登陆

摘要：做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了，在学习使用的过程中又偶遇了。做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了mock，在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下：准备实例是建立在vue-cli的基础上实现需要提前安装的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

draveness 2019-08-23 16:09 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

maochunguang 2019-08-02 16:08 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

JowayYoung 2019-08-30 15:56 评论0 收藏0