文档章节

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

不良少年王孑然
 不良少年王孑然
发布于 2017/05/02 00:57
字数 208
阅读 262
收藏 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
私信 提问
基于 vue+ ssm + shiro 的权限框架 - zhcc

zhcc 基于vue(element ui) + ssm + shiro 的权限框架 随着前后端分离项目的热潮,前端各大框架的,前后端沟通部分也成了问题,之前服务端渲染的页面生成到前端来,现在前后端可能是两个服务器...

DarrenHu_吴邪
08/15
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
09/01
0
0
用addRoutes实现动态路由

原文地址:前端路上,转载请注明出处。 之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了...

tower1229
06/26
0
0
前端-优雅的VueJS

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

掘金官方
01/08
0
0
renren-fast-vue 1.2.1 发布,一套更优的前端解决方案

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
21分钟前
0
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
27分钟前
0
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
1
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
1
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部