浅谈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 相关文章推荐
图片Slider 带左右按钮的js示例
Aug 30 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
js实现常见的工具条效果
Mar 02 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
在vue中使用console.log无效的解决
Aug 09 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 pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
linux下编译安装memcached服务
2014/08/03 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP实现简易计算器功能
2020/08/28 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
详解Python中的变量及其命名和打印
2016/03/11 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python设计密码强度校验程序
2020/07/30 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
python 制作网站小说下载器
2021/02/20 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
技术总监管理岗位职责
2014/03/09 职场文书
525心理活动总结
2014/07/04 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
研修心得体会
2014/09/04 职场文书
办理房产证委托书
2014/09/18 职场文书
儿子满月酒致辞
2015/07/29 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书