从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇:基于Vuex的权限验证探究...
缘起
哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登陆进行研究,这一块咱们之前在说第一个项目的时候已经稍微说到了,具体的逻辑大家可以查看这篇文章《二十四║ Vuex + JWT 实现授权验证登陆》,具体的运行原理和流程,以及什么是 vuex ,在那里已经说的很清楚了,今天咱们就是主要在 nuxt 框架中使用,主要的代码的形式,理论知识比较少了,大家可以歇一歇了。这几天写了这么多,好多人可能都没看,不过没关系,继续回顾:
《二七║ Nuxt 基础:框架初探》:通过 SSR 来引入 nuxt 框架,第一次接触到该框架;
《二八║ Nuxt 基础:面向源码研究Nuxt.js》:通过研究 node_modules 中的源码,带领大家一步步了解 nuxt 是如何进行服务端渲染的;
《二九║ Nuxt实战:异步实现数据双端渲染》:通过首页的数据加载,更加深刻的了解到 nuxt 的双端渲染,异步很重要;
《 三十║ Nuxt实战:动态路由+同构》:通过首页和详情页的交互,进一步巩固 nuxt 的渲染模式和动态路由效果。
从上边大家可以看到,几乎每一篇都会说到 nuxt 这个框架的渲染模式,这个很重要,更是对 vue 的巩固。好啦,马上开始今天的讲解~
零、今天要完成橙色的部分
![](https://upload-images.jianshu.io/upload_images/13652172-63532e8bb2fc4d01.png)
为详情页增加权限验证
今天呢,咱们换一种玩儿法,就是将我们的详情页给增加一个权限,首页的数据大家都可以随便看,但是详情页却不能随便看,必须要登陆,那我们就需要在我们的详情页增加一个权限,
如果 token 存在,则发送请求验证,如果不存在,直接跳转到登录页,那我们首先要添加一个登录页
添加登录页,获取token
在 pages页面文件夹下,新建login 文件夹,然后添加 index.vue 登陆页面,
这一块逻辑和我们之前的很像,大家可以参考着做对比
![](https://upload-images.jianshu.io/upload_images/13652172-4cfbfea12aa71b3d.png)
<template><el-row type="flex" justify="center"><el-card v-if="isLogin"> 欢迎:admins <br><br><el-button type="primary" icon="el-icon-upload" @click="loginOut">退出登录</el-button></el-card><el-form v-else ref="loginForm" :model="user" :rules="rules" status-icon label-width="50px"><el-form-item label="账号" prop="name"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input v-model="user.pass" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" icon="el-icon-upload" @click="login">登录</el-button></el-form-item></el-form></el-row>
</template><script> import Vue from "vue";export default {methods: {login: function() {let that = this;that.$store.commit("saveToken", ""); this.$refs.loginForm.validate(valid => { if (valid) { //发送请求登陆,这里要注意下返回数据格式,如果有问题,参考 http.js 中的 response 设置Vue.http.get("Login/GetTokenNuxt?name="+that.user.name+"&pass="+that.user.name+"").then(res => { if (res.success) {console.log("登陆成功"); var token = res.token;that.$store.commit("saveToken", token); this.$notify({type: "success",message: "欢迎你," + this.user.name + "!",duration: 3000 }); this.$router.replace("/");}}).catch(err => {console.log("点赞失败", err);});} else { return false;}});},loginOut(){ this.isLogin=false; this.$store.commit("saveToken", "");}},data() { return {isLogin:false,user: {},rules: {name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],pass: [{ required: true, message: "密码不能为空", trigger: "blur" }]}};},created() {}} </script>
自定义 elementUI 插件
![](https://upload-images.jianshu.io/upload_images/13652172-d5970d23f602fc96.png)
提醒:这里我用到了 elementUI ,请安装
npm i element-ui -S
安装成功后,作为插件使用,如果你不是很了解,请访问官网《插 件》一章节,这里说的很清楚,我在之前的文件中也有提到。
在 plugins/server_site 文件夹下,新增 ElementUI.js 文件,作为我们的插件
import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI)
然后把这个 js 插件导入到 index.js 中,和 http.js一起注入到nuxt.config.js 中
//这个是 server_site 服务端插件全部
import Vue from "vue";
import http from "./http.js";
import "./ElementUI.js";//导入 elementUI插件const install = function (VueClass, opts = {}) { // http methodVueClass.http = http;VueClass.prototype.$http = http;
};
Vue.use(install);
因为我们是把服务端的插件都打包了 server_site 下的index中,所以我们以后不用每一个都注入到我们的配置文件 nuxt.config.js 中,只需要将 服务端插件 一个放进去即可,但是样式还是需要引用的
![](https://upload-images.jianshu.io/upload_images/13652172-89462dc105ab807c.png)
在 strore 文件夹中,添加 index.js 文件,设置我们的store数据
![](https://upload-images.jianshu.io/upload_images/13652172-9d12a84bfc0ff72a.png)
import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex); const store = () => new Vuex.Store({state: {isLogined: false,token: "",//这里主要是用到了 tokenuserInfo: {name: "" },loginBoxVisible: false },mutations: { //保存 token 到 store和本地中saveToken(state, data) {state.token = data;window.localStorage.setItem("Token", data);},changeLoginState (state, isLogined) {state.isLogined = isLogined;},changeLoginBoxVisible (state, visible) {state.loginBoxVisible = visible;},updateUserInfo (state, userInfo) {state.userInfo = userInfo;}},actions: {initUser ({ state, commit }) { const user = JSON.parse(localStorage.getItem("userInfo")); if (user) {state.userInfo = user;commit("changeLoginState", true);}}}
});export default store;
在详情页中增加权限验证
大家一定还记得这个图片,这个是我们之前讲到的 nuxt 的执行流程图,这里说下 fetch()
![](https://upload-images.jianshu.io/upload_images/13652172-7096c3d93c890198.png)
fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
如果页面组件设置了
fetch
方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之前)。
我们可以利用该方法,获取 状态树 中的 token 信息,并做处理,在昨天的基础上,我们只对 fetch() 方法,简单修改
<script> import Vue from "vue";export default {layout: "blog", async asyncData ({ params, error }) { // 获取文章详情let data = {}; try {data = await Vue.http.get(`blog/${params.id}`); return {data: data};} catch (e) { //error({ statusCode: 404, message: "出错啦" });}}, //在这里进行判断 tokenfetch ({ store, redirect }) { if (!(store.state.token&&store.state.token.length>=128)) { //跳转登录页return redirect('/login')}},data () { return {comments: []};},head () { return {title: `${this.data.btitle}`,meta: [{name: "description",content: this.data.btitle}]};}}; </script>
最后在 http.js 中,开启 http 拦截器
// http.interceptors.request.use((data, headers) => { // return data; // }); //http request 拦截器http.interceptors.request.use(config => { //注意,首次服务端渲染的时候,还没有出现 DOM,所以找不到 windows 对象,这里用 try 处理掉了try { if (window.localStorage.Token&&window.localStorage.Token.length>=128) {//store.state.token 获取不到值config.headers.Authorization = window.localStorage.Token;}}catch (e) {} return config;},err => { return Promise.reject(err);});
查看页面,体验效果
这里我们就已经限制了详情页,需要登陆才能查看,其实这一块逻辑我们可以单拿出来放到中间件 middleware 里来使用,效果会更好,这里举个栗子:路由鉴权
提醒: 因为我们用的是 store 判断的是否登陆,但是如果刷新页面,我们用的是 服务端渲染,所以 store 会被更新掉,也就是为空了,大家可以用两个办法处理
1、用 localStorage 来判断是否存在token;2、每次服务端渲染,需要更新状态树 store 中的 token;
![](https://upload-images.jianshu.io/upload_images/13652172-8f1d99fbc11a3f95.gif)
结语
今天的讲解比较简单,主要是验证逻辑我们之前也已经提到了,在我们系列的 24 篇中,本文只是简单的将其搬到我们的 nuxt 框架中来,只不过中间还是会有一些小问题大家需要注意:
1、插件 plugins 的使用很重要,2、基于 axios 的 http 封装,我只是写了简单的一个 demo,复杂的大家可以找一些大的项目框架,自行研究研究;3、路由机制也是需要留心的一个小知识点,虽然不需要我们配置了,不过还是要了解内部结构。
好啦,nuxt 基本教程这里就说这么多吧,祝大家在大长假里开开森森哒~
GitHub
https://github.com/anjoy8/Blog.Vue.Nuxt
从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇:基于Vuex的权限验证探究...相关推荐
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战:动态路由+同构...
上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
- 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言
缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象字面量this
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探...
代码已上传Github+Gitee,文末有地址 番外:在上文中,也是遇到了大家见仁见智的评论和反对,嗯~说实话,积极性稍微受到了一丢丢的打击,不过还好,还是有很多很多很多人的赞同的,所以会一直坚持下去 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选,Redis入门 11.1...
大神留步 先说下一个窝心的问题,求大神帮忙,如何在Task异步编程中,使用Redis存.取Task<List<T>>泛型,有偿帮助,这里谢谢,文末有详细问题说明,可以留言或者私 ...
- 学生选课系统 前后端分离 vue springboot
学生选课系统 前后端分离 vue springboot 系统描述 一.系统功能 二.系统截图 1.网络爬虫 新闻获取代码 2.pom 源码 系统描述 基于spring boot vue的学生选课系统 ...
最新文章
- 在ubuntu16.0403X64上安装海思交叉编译工具链
- 不喜欢SAP GUI?那试试用Eclipse进行ABAP开发吧
- 新获融资1亿,聚焦全栈,云知声背后的AI下半场
- linux配置静态ip
- SAP 取月度期初库存和月度期末库存(历史库存)
- java做的模板商城_不吹不黑4个超火Java开源项目,接私活、练手、必备项目
- innodb和myisam数据类型,即在存储上有何特点和区别
- IDEA的十大快捷键
- 具有Aspects的Java中的Mixin –用于Scala特性示例
- 图片上传工具 java_图片上传工具类-fileUtil
- 46.@弹出点击次数
- [转]虚函数实现原理
- 有道词典java下载电脑版下载手机版下载安装_【有道词典官方下载】有道词典PC版下载_多特软件站...
- 在Win2016上安装SVNServer21步骤
- 移动端网页字体过多时,字体被自动放大问题
- 2021高考倒计时HTML源码,2021高考倒计时
- Marvell车载交换机88Q5050, 88Q5072 VLAN配置(一)------VLAN的基本原理
- verilog奇数分频,三分频实例
- MATLAB实现基于BP神经网络的手写数字识别+GUI界面+mnist数据集测试
- C语言知识-零零散散(三)
热门文章
- 海量遥感数据处理与GEE云计算
- 【ITOO 1】SQLBulkCopy实现不同数据库服务器之间的批量导入
- QT绘图(添加背景,画图形)
- 纵断面 java_判断(4分) 断面图只要画出断面的图形,不用管断面分不分离。( )...
- Grafana 国内镜像源加速下载
- 关于抢红包线程卡顿的问题解决流程笔记
- jdbc mysql 成功 spring mysql 失败_java Spring 的JDBCTemplet批量入库数据时如果有一条数据入库不成功,其他的数据还会入库吗...
- jquery-ajxa
- 小京东V4.2甜心100分销版本-源码分享
- 电脑关机关不了 电脑关不了机的原因和修复