nuxt-服务端渲染（更新中...）

nuxt中的路由导航守

1. 前置守卫

• middleware 定义文件在noxt-config.js的middleware中引入文件

	export default =({route,app,redirect,store,params,query})=>{
		// router 路由
		// app vue实例
		// redirect 强制跳转
		// store 状态树
		// query/params 数据校验
		console.log("this nuxt-config middleware")
		app.router.beforEach((to,form,next)=>{
			if(true){
				next()
			}else {
				redirect({name:'/login'})
			}
		})
	}

• 在layouts入口标签里面配置middleware方法
• 在page单页面中配置middleware方法

export default {
	data(){
		return{
		}
	},
	middleware({redirect}){
		console.log('this layoults or page middleware')
		redirect('/login')
	}
}

2. 后置路由守卫

• beforRouteLeave vue钩子

export default {
 	data(){
 		return {
 		}
 	}
	beforRouterLeave(to,from,next){
		let bl = windew.confirm('是否跳转页面')
		next(bl)
	}
}

• 插件中定义

	export default =({route,app,redirect})=>{
		console.log("this nuxt-config middleware")
		app.router.afterEach((to,form)=>{
			redirect('/login')
		})
	}

vuex

// 注册vuex实例
export const state = ()=> ({
	err:0,
	msg:'未登录',
	data:{},
	token:'',
	phone:''
})
export const actions = {
	A_UPDATE_USER({commit,state},val){
		commit('M_UPDATE_USER',val);
	},
	nuxtServerInit(store,{app:{$cookie}}){
		// 登录cookie数据持久化 
	}
},
export const mutations = {
	M_UPDATE_USER(user,val){
		user.err = val.err;
		user.msg = val.msg;
		user.data = val.data;
		user.token = val.token;
	}
},
export const getters = {
	userPhone(state){
		return state.phone
	}
},

//组件内调用 和 辅助函数
this.$store.dispatch('user/A_UPDATE_USER', {
        err: 1,
        msg: '登录成功',
        data: {
          name: 'zs'
        },
        token: '123456789'
      });
this.$stare.commit('user/M_UPDATE_USER', {
        err: 1,
        msg: '登录失败',
        data: {
          name: 'zs'
        },
        token: '123456789'
      });
this.$store.geetter('user/userPhone')
this.$store.state.name
methods:{
	...mapActions(user,['A_UPDATE_USER'])
	...mapMutations(user,['M_UPDATE_USER'])
}
computed:{
	...mapGetter(user,['userPhone'])
	...mapState(user,['err,msg,data,token,phone'])
	...mapState({
		user_name:state=>{state.user.name}
	})
}

服务端渲染-状态持久化和token校验

下载：

npm i cookie-universal-nuxt --save

思路：

登录时同步vuex/cookie,强制刷新后在nuxtServerInit钩子中取出cookie并同步vuex，在axios请求拦截器携带vuex中token。

用法：

	// 安装完 cooki-universal-nuxt后会在实例上挂载$cookie方法
	// 存储 cookie
	this.$cookie.set('user',res.data.token);
	// 存储 VUEX
	this.$store.commit('user/M_UPDATE_USER',res.data.token);
	// 强刷后 vuex数据消失
	nuxtServerInit(store,{app:{$cookie}}){
		// app -> vue实例中取出 $cookie
		// 取出 cookie中的数据
		let user = $cookie.get('user')?$cookie.get('user'):'默认自定义登录失败信息';
		// 同步 VUEX数据
		this.$store.commit('user/M_UPDATE_USER',user)
	}
	// axios 请求拦截器
	$axios.onRequest(config =>{
		// 配置axios 请求头
		config.headers.token = store.state.user.tokeng
		return config
	})
		
}

NUXT-tpyescript

npm install --save-dev @nuxt/typescript-build

nuxt-config.js

buildModule:[’@nuxt/typescript-build’]

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck":true,
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

// vue-shim.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

npm install vue-class-component vue-property-decorator --save-dev

// vue.d.ts 重新axios 类型推断
import Vue from 'Vue'
import {NuxtAxiosInstance} from '@nuxt/axios'
declare module 'vue/types/vue'{
	interface Vue{
		$axios:NuxtAxiosInstance
	}
}

改造方法

<script lang="ts">
	import {Vue,Component,Watch,Prop} from 'vue-property-decorator'
	type TNavs = {path:'string',title:'string'}
	@Component({
		middleware({store,{app:{$axios}},query,route,redirect,params}){}
		vildate(){},
		asyncDate(){},
		head(){},
		components:['loging'],
		mixin:['mixin'],
		
	})
	export default class AppHeader extends Vue{
		//prop
		@Prop() info:string|undefined
		// data
		navs:TNavs[] = [
			{path:'/',title:'首页'},
			{path:'/goods',title:'商品'},
		]
		// methods
		handleSelect(key:number):void{
			this.$route.push(this.navs[key].path)
		}
		// 监听属性
		@Watch('$router',{deep:true,immediate:true,})
			onRouteChange(){
				.../
			}
		mounted(){}
	
	}
</script>

路由观测

watch:{
	$router:{
		immediate:true,
		handler(route){
			// route.path
		}
	}
}