浅谈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 相关文章推荐
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JS实现购物车基本功能
Nov 08 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
Thinkphp整合微信支付功能
2016/12/14 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python async with和async for的使用
2019/06/20 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python如何从文件读取数据及解析
2019/09/19 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
理货员的岗位职责
2013/11/23 职场文书
护士的自我鉴定
2014/02/07 职场文书
高考寄语大全
2014/04/08 职场文书
项目合作协议书范本
2014/04/16 职场文书
政治学求职信
2014/06/03 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2014年营销工作总结
2014/11/22 职场文书
在职证明格式样本
2015/06/15 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL