浅谈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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
js正确获取元素样式详解
Aug 07 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
js倒计时显示实例
Dec 11 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
微信小程序实现录音功能
Nov 22 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
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
python 自动提交和抓取网页
2009/07/13 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
django orm模块中的 is_delete用法
2020/05/20 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
指导教师评语
2014/04/26 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
简历自我评价模板
2015/03/11 职场文书
2015年团支书工作总结
2015/04/03 职场文书
横空出世观后感
2015/06/09 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python