nuxt.js中间件实现拦截权限判断的方法


Posted in Javascript onNovember 21, 2018

最近在把vue的项目改成基于nuxt.js是 ssr渲染,需要进行权限拦截判断,网上查了不少资料。最终看官方手册解决了,贴一下过程

项目环境

"element-ui":"^2.3.4",

"flyio":"^0.5.2",

"js-cookie":"^2.2.0",

"nuxt":"^1.4.0",

一:首先登录页面

在登录页面script中引入

import Cookie from 'js-cookie' //npm install js-cookie --save

在script里加上

data(){
 return{
  redirectURL:'/'
 }
},
mounted() {
  let rediretUrl = this.$route.query.ref;
  if (rediretUrl){
  this.redirectURL = rediretUrl
  }
 }

接着在methods里面编写一个 submitLogin的方法

submitLogin(ev) {
  var _this = this;
  this.$refs.ruleForm2.validate((valid) => {
   if (valid) {
   _this.logining = true
   var sendData = {
    username: _this.ruleForm2.account,
    password: _this.ruleForm2.pass,
    is_remember: _this.isRemember
   };
   //登录操作
   _this.$https.post('login/index', sendData).then(res => {
    if (res.status == 1) {
    //将服务端的token存入cookie当中
    Cookie.set('token', res.data.token)
    //返回上一页
    _this.$router.push(_this.redirectURL)
    }else{
    _this.$message.warning(res.msg)
    }
   })
   } else {
   return false;
   }
  });
  },

二:nuxt中间件middleware编写权限拦截

新建一个userAuth.js,目录结构如下

代码如下

import utils from '~/utils/utils'
 
export default function ({route, req, res, redirect}) {
 let isClient = process.client;
 let isServer = process.server;
 let redirectURL = '/login';
 var token, path
 //在服务端
 if (isServer) {
 let cookies = utils.getcookiesInServer(req)
 path = req.originalUrl;
 token = cookies.token ? cookies.token : ''
 }
 //在客户端判读是否需要登陆
 if (isClient) {
 token = utils.getcookiesInClient('token')
 path = route.path;
 }
 if (path) {
 redirectURL = '/login?ref=' + encodeURIComponent(path)
 }
 //需要进行权限判断的页面开头
 if (!token) {
  redirect(redirectURL)
 }
}

utils.js里面的方法

import Cookie from 'js-cookie'
export default {
 //获取服务端cookie
 getcookiesInServer:function (req) {
 let service_cookie = {};
 req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
  let parts = val.split('=');
  service_cookie[parts[0].trim()] = (parts[1] || '').trim();
 });
 return service_cookie;
 },
 //获取客户端cookie
 getcookiesInClient:function (key) {
 return Cookie.get(key) ? Cookie.get(key) : ''
 }
}

到这里,我们的中间件,权限判断依据完成了

三:运用到项目中

在项目中。例如,用户信息设置页面,需要进行是否登录判断

pages/user/setting.vue

我们在页面中运用刚刚编写的userAuth中间。

middleware: 'userAuth',

现在

setting页面就有权限判断了

基于nuxt.js渲染的 ssr 网站可以愉快的运行起来了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript几个易错点记录
Nov 26 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php array_flip() 删除数组重复元素
2009/01/14 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
$()JS小技巧
2007/07/21 Javascript
javascript 写类方式之一
2009/07/05 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
javascript操作数组详解
2014/12/17 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python路径的写法及目录的获取方式
2019/12/26 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
博士生导师推荐信
2014/07/08 职场文书
客房服务员岗位职责
2015/02/09 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Python入门之使用pandas分析excel数据
2021/05/12 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
httpclient调用远程接口的方法
2022/08/14 Java/Android