文档章节

Vue.js 前端登录验证实现笔记

不良少年王孑然
 不良少年王孑然
发布于 2017/05/02 00:57
字数 208
阅读 222
收藏 0
点赞 0
评论 0

项目需要实现的是路由渲染和权限控制。

入口文件

// Main.jsx

import Vue from 'vue'
import resource from 'vue-resource'
import store from './store.jsx'
import router from './router.jsx'

router.beforeEach((to, from, next) => {
    // 设置网站标题
    document.title = to.meta.title !== undefined ? to.meta.title : ""

    // 验证 Token 是否正确
    store.dispatch('verifyToken').then((state) => {
        if (to.meta.requestedAuthenticated){
            if (!store.getters.checkAuthorization){
                next({
                    path: "/login"
                })
            }
        }
    }, err => {})

    next()
});

//...

 Vuex 的 Actions

// store/actions.jsx

import Vue from 'vue' // 需要用到 vue-resource 插件

export default {
    //...
    verifyToken({ commit, state }) {
        // Check token...
        return new Promise((resolve, reject) => {
            Vue.http.post('/users/checkToken', { token: localStorage.getItem('token')}).then((response) => {
                if (response.ok){
                    let data = response.data;

                    if (data.status == true){
                        commit("pushAuthenticated", true);
                        resolve(true);
                    } else {
                        reject();
                        commit("pushAuthenticated", false);
                    }
                }
            }, err => {
                console.log(err);
            });
        });
    }
    //...
}

Router

export default [
//...
    {
        path: "/",
        name: "home",
        meta: {
            requestedAuthenticated: true
        },
        component: require("../components/main.vue")
    }
//...
]

渲染组建

<!-- App.vue Component -->
<template>
    <div class="container-fluid" v-if="isAuthenticated">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
	computed: {
        isAuthenticated() {  // 这个方法主要是避免没有权限的页面进行渲染显示
            if (this.$store.state.route.meta.requestedAuthenticated){
                return this.$store.getters.checkAuthorization;
            }else {
                return true;
            }
        }
	}
}
</script>

完结。

© 著作权归作者所有

共有 人打赏支持
不良少年王孑然
粉丝 1
博文 1
码字总数 208
作品 0
renren-fast-vue 1.2.1 发布,一套更优的前端解决方案

renren-fast-vue renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端功能,提供一套更优的前端解决方案 前后端分离,通过token进行数据交互,可独立部署 主题定制,通...

字母大号被盗了 ⋅ 06/08 ⋅ 0

前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方 ⋅ 01/08 ⋅ 0

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁 ⋅ 04/16 ⋅ 0

VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方 ⋅ 01/09 ⋅ 0

使用 Mpvue 开发微信小程序的最佳实践

本文由 授权转发,转载需与GitChat联系。 原文链接 本文作者:美团点评 胡成全 前言 小程序面世一年多以来,给前端开发带来了巨大的影响,有移动应用的地方,就有小程序的踪迹。经过一年多的...

乌骑凤 ⋅ 05/17 ⋅ 0

太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在...

闰土大叔 ⋅ 06/08 ⋅ 0

基于 Vue 的前端解决方案 - renren-fast-vue

renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端功能,提供一套更优的前端解决方案。 renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端...

字母大号被盗了 ⋅ 04/16 ⋅ 0

vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888 ⋅ 05/22 ⋅ 0

Exrick/xmall-front

XMall-Front 基于Vue开发的XMall商城前台页面 项目已部署,在线Demo 前台商城:http://xmall.exrick.cn/ 后台管理系统:http://xmadmin.exrick.cn/ 感谢 yucccc 的开源 vue-mall 项目提供前端...

Exrick ⋅ 04/21 ⋅ 0

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704 ⋅ 2017/04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

一篇文章学懂Shell脚本

Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合。 Shell可以直接使用在win/Unix/Linux上面,并且可以调用...

Jake_xun ⋅ 17分钟前 ⋅ 0

大数据工程师需要精通算法吗,要达到一个什么程度呢?

机器学习是人工智能的一个重要分支,而机器学习下最重要的就是算法,本文讲述归纳了入门级的几个机器学习算法,加大数据学习群:716581014一起加入AI技术大本营。 1、监督学习算法 这个算法由...

董黎明 ⋅ 49分钟前 ⋅ 0

Kylin 对维度表的的要求

1.要具有数据一致性,主键值必须是唯一的;Kylin 会进行检查,如果有两行的主键值相同则会报错。 2.维度表越小越好,因为 Kylin 会将维度表加载到内存中供查询;过大的表不适合作为维度表,默...

无精疯 ⋅ 53分钟前 ⋅ 0

58到家数据库30条军规解读

军规适用场景:并发量大、数据量大的互联网业务 军规:介绍内容 解读:讲解原因,解读比军规更重要 一、基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务、行级锁、并发性能更好、CPU及...

kim_o ⋅ 56分钟前 ⋅ 0

代码注释中顺序更改 文件读写换行

`package ssh; import com.xxx.common.log.LogFactory; import com.xxx.common.log.LoggerUtil; import org.apache.commons.lang3.StringUtils; import java.io.*; public class DirErgodic ......

林伟琨 ⋅ 今天 ⋅ 0

linux实用操作命令

参考 http://blog.csdn.net/qwe6112071/article/details/50806734 ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件-A 同-a,但不列出"."和"...

简心 ⋅ 今天 ⋅ 0

preg_match处理中文符号 url编码方法

之前想过直接用符号来替换,但失败了,或者用其他方式,但有有些复杂,这个是一个新的思路,亲测可用 <?php$str='637朗逸·超速新风王(300)(白光)'; $str=iconv("UTF-8","GBK",$s...

大灰狼wow ⋅ 今天 ⋅ 0

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 今天 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 今天 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部