浅谈nuxtjs校验登录中间件和混入(mixin)
作者：强身健体，清神醒脑
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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。