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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
JS中操作JSON总结
2020/12/06 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
JS实现li标签的删除
2019/04/12 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python和php哪个容易学
2020/06/19 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
浅析Python requests 模块
2020/10/09 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
趣味运动会策划方案
2014/06/02 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2015年导购员工作总结
2015/04/25 职场文书
新年晚会开场白
2015/05/29 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Python 中面向接口编程
2022/05/20 Python