浅谈nuxtjs校验登录中间件和混入(mixin)


Posted in Javascript onNovember 06, 2020

middleware — authLogin.js

export default function ({ route, store, redirect, app, req, res }) {
 // store.state.auth.loggedIn 是否登录
 // 权限页面检查登录状态
 if (!store.state.auth.loggedIn) {
 store.commit('changeShowType', 'login'); // 展示登录框或者可以跳转登录页
 const query = {
  ...app.router.currentRoute.query
 };
 query.redirect = route.fullPath; // 路由携带redirect参数
 if (app.router.currentRoute.path === route.path) {
  return redirect('/');
 } else {
  return redirect(app.router.currentRoute.path, query);
 }
 }
};

mixin— authLogin.js

export default {
 methods: {
 authLogin (fn, v) {
  /**
   * fn 函数名称
   * v参数 格式 Object
   * 执行某些方法之前的登录鉴定,没有登陆则登录
   */
  if (this.$auth.loggedIn) {
  this[fn](v);
  } else {
  this.$store.commit('changeShowType', 'login');
  this.$store.commit('changeIsShowLoginRegist', true);
  // 避免redirect字段无限拼接
  let queryStr = '';
  const query = this.$route.query;
  delete query.redirect;
  Object.keys(query).forEach((key) => {
   const str = key + '=' + this.$route.query[key] + '&';
   queryStr += str;
  });
  queryStr = queryStr.slice(0, -1);
  this.$router.replace({
   path: this.$route.path,
   query: {
   ...query,
   redirect: this.$route.path + '?' + queryStr
   }
  });
  }
 }
 }
};

补充知识:nuxt 项目 配置对 less、sass、stylus 预处理器的支持

导读

在项目开发的过程中呢,在编写项目样式的时候,很多童鞋喜欢使用css预处理器进行方便快捷的开发,

所以说,让我们的项目支持预处理器是非常有必要的;

这章节呢,我们项目新增对 stylus、less、sass 这三款比较常用的css预处理器工具的支持;

我们可以去到官网查看文档:https://zh.nuxtjs.org/api/configuration-build/#styleresources

首先我们需要安装 style-resources:

cnpm install --save-dev @nuxtjs/style-resources

我们根据需要,会安装如下:

sass: cnpm install --save-dev sass-loader node-sass

less: cnpm install --save-dev less-loader less

stylus: cnpm install --save-dev stylus-loader stylus

接下来我们需要修改nuxt.config.js里面的配置,如下:

export default {
 modules: [
 '@nuxtjs/style-resources',
 ],
 styleResources: {
 scss: './assets/variables.scss',
 less: './assets/**/*.less',
 // sass: ... 需要什么配置什么,这里是全局的
 }
}

stylus

接下来,我们进入测试阶段,我们修改index.vue里面的样式如下:

<style scoped lang="stylus">
 wh($w = 100%, $h = 100%){
 width:$w; height:$h;background-color:red;
 }
 .content-page {
 margin: 0;
 wh()
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

我们重新启动服务,打开浏览器,观察样式是否有生效,好这里呢,我们看到我们的项目背景已经变成红色了,

所以我们预处理器已经配置好了;

接下来,我们就需要配置全局的函数styl文件,

(1)最简单最直接的方法,就是直接引入:

<style scoped lang="stylus">

 @import "~assets/common.styl"

 .content-page {
 margin: 0;
 wh()
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

备注:如果处于多个文件同时使用这样一个文件的时候,每次都需要这样引入,是相当繁琐的一件事情;

所以呢,我们需要更加快捷简单的方式;

(2)我们把下面的wh()方法封装在一个公共的assets/common.styl之中,然后呢,我们在nuxt.config.js中新增如下:

styleResources: {
 stylus: '~/assets/common.styl',
 // sass: ...
},

保存之后,重新启动服务,我们会发现,样式依旧可以起作用;所以呢,全局公共的样式表,是可以这样配置的;

less

这里呢,我们再来测试下less是否生效,编辑如下:

<style scoped lang="less">

 @color:pink;
 .bg{
 width:100%;height:100%;background-color: @color;
 }

 .content-page {
 margin: 0;
 .bg;
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

接下来,我们就来测试公共文件,我们在assets/common.less中新增如下:

@color:purple;
.bg{
 width:100%;height:100%;background-color: @color;
}

我们把组件内部的less定义给删除掉,观察这个背景是否变成紫色,我们重启服务,会发现这个背景会变成紫色,

说明我们的less文件已经全局引入成功了;

sass

接下来我们来测试下sass ,我们编辑如下:

<style scoped lang="scss">

 $color:yellow;
 @mixin block{
 width:100%;height:100;background-color:$color;
 }

 .content-page {
 margin: 0;
 @include block;
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

这里呢,我就不再测试全局引入的两种方式了,有兴趣的童鞋们呢可以多去尝试尝试;好,我们这章节内容呢,在nuxt项目中配置3种css预处理器已经完成了。

以上这篇浅谈nuxtjs校验登录中间件和混入(mixin)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 #Javascript
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python破解zip加密文件的方法
2018/05/31 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python3实现名片管理系统
2020/11/29 Python
Django框架实现的分页demo示例
2019/05/25 Python
python中的句柄操作的方法示例
2019/06/20 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
班委竞选演讲稿
2014/04/28 职场文书
设备售后服务承诺书
2014/05/30 职场文书
党性观念心得体会
2014/09/03 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
同学会邀请函模板
2015/01/30 职场文书
教师求职自荐信范文
2015/03/04 职场文书
公司门卫岗位职责
2015/04/13 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python