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 Demo模态窗口
Dec 06 Javascript
js数组操作学习总结
Nov 04 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php阳历转农历优化版
2016/08/08 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
python 数据加密代码
2008/12/24 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python生成ppt的方法
2018/06/07 Python
对numpy中shape的深入理解
2018/06/15 Python
python实现字符串和数字拼接
2020/03/02 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
大学生村官事迹材料
2014/01/21 职场文书
市场推广策划方案
2014/06/02 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
台风停课通知
2015/04/24 职场文书
被告答辩状范文
2015/05/22 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python