文档章节

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

不良少年王孑然
 不良少年王孑然
发布于 2017/05/02 00:57
字数 208
阅读 269
收藏 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
renren-fast-vue 1.2.1 发布,一套更优的前端解决方案

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

字母大号被盗了
06/08
1K
9
renren-fast-vue 1.2.0 发布,一套更优的前端解决方案

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

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

没有更多内容

加载失败,请刷新页面

加载更多

集群介绍 ..

12月19日任务 18.1 集群介绍 18.2 keepalived介绍 18.3/18.4/18.5 用keepalived配置高可用集群 一.集群介绍 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,...

hhpuppy
16分钟前
0
0
TensorFlow的基础概念02

TensorFlow的计算流图 import osos.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'#TensorFlow的计算模型,数据流图'''TensorFlow = Tensor + FlowTensor 张量 数据结构:多维数组Flo...

怪咖先生forever
22分钟前
1
0
大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
38分钟前
8
0
藏在正则表达式里的陷阱

前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现 CPU 利用率将近 100%。通过 Java 自带的线程 Dump 工具,我们导出了出问题的堆栈信息。 我们可以看到所...

前端小攻略
40分钟前
3
0
关联更新,关联查询

关联更新 update A,B SET A.c1=B.c1,A.c2=B.c2 where A.id=B.id and ... update A inner join on A.id=B.id set A.c1=B.c1,A.c2=B.c2 where... 关联查询 交叉连接(cross join),内连接(inner ......

关元
43分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部