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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
安全生产宣传标语
2014/06/06 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
行政申诉状范文
2015/05/20 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技