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

2023-07-12 17:19:03 312

middleware—authLogin.js

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

mixin—authLogin.js

exportdefault{
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字段无限拼接
letqueryStr='';
constquery=this.$route.query;
deletequery.redirect;
Object.keys(query).forEach((key)=>{
conststr=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：

cnpminstall--save-dev@nuxtjs/style-resources

我们根据需要，会安装如下：

sass:cnpminstall--save-devsass-loadernode-sass

less:cnpminstall--save-devless-loaderless

stylus:cnpminstall--save-devstylus-loaderstylus

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

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

stylus

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


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:0auto;margin-bottom:30px;
}
.spinner-box{
display:block;margin:0auto;margin-top:50px;
}

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

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

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

（1）最简单最直接的方法，就是直接引入：



@import"~assets/common.styl"

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

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

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

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

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

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

less

这里呢，我们再来测试下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:0auto;margin-bottom:30px;
}
.spinner-box{
display:block;margin:0auto;margin-top:50px;
}

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

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

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

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

sass

接下来我们来测试下sass，我们编辑如下：



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

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

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

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

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

热门推荐

随机推荐