文档章节

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

不良少年王孑然
 不良少年王孑然
发布于 2017/05/02 00:57
字数 208
阅读 243
收藏 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_吴邪
前天
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
前后端分离实践:基于vue实现网站前台的权限管理

注: 本文首发于 My 公众号 CodeSheep ,可 长按 或 扫描 下面的 小心心 来订阅 ↓ ↓ ↓ Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部...

CodeSheep
01/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud SpringBoot mybatis分布式Web应用的统一异常处理

我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况。Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用...

itcloud
9分钟前
0
0
c++ std::bind和std::function

定义于头文件 <functional> std::bind 函数绑定,https://zh.cppreference.com/w/cpp/utility/functional/bind // bind 用例#include <iostream>#include <functional> // 自定义的一......

SibylY
11分钟前
0
0
SecureCRT的安装与破解(过程很详细!!!)

SecureCRT的安装与破解(过程很详细!!!) SecureCRT的安装与破解(过程很详细!!!) 使用SecureCRT可以方便用户在windows环境下对linux主机进行管理,这里为大家讲一下SecureCRT的破解方...

DemonsI
16分钟前
0
0
介绍几款可用的web应用防火墙

目前有两款,基于软件和基于应用程序的web应用防火墙。基于软件的产品布置在Web服务器上,而基于应用程序的产品放置在Web服务器和互联网接口之间。两种类型的防火墙都会在数据传入和传出web...

上树的熊
22分钟前
1
0
用Visual Studio开发以太坊智能合约

区块链和以太坊 自从我熟悉区块链、以太坊和智能合约以来,一直失眠。 我一直在阅读,阅读和阅读,最后我能够使用一些工具,他们建议使用以太坊网站官方客户端应用程序(Ethereum Wallet)也...

geek12345
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部