Vue登录注册，并保存登录状态

项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等
有一些路由是不需要登录就可以进入，比如登录页，注册页，忘记密码等等
那如何判断路由是否需要登录呢？

在router.js中添加meta区分

比如登录注册页面，不需要登录即可进入，那么我们把meta中的isLogin标志设置为false

{
	// 登录
	path: '/login',
	component: login,
	meta: {
		isLogin: false
	}
},
{
	// 注册
	path: '/register',
	component: register,
	meta: {
		isLogin: false
	}
}

而在首页我们需要登录才能进入，那么我们把meta中的isLogin标志设置为true

{
	// 首页
	path: '/home',
	component: home,
	meta: {
		isLogin: true
	}
}

接下来我们在login.vue中修改登录后状态

this.$axios.post('/login', {user:name,password:pwd})
	.then(res => {
		// 登录失败
		if (res.data.status != 200) {
			this.$message.error(res.data.message);
		// 登录成功
		} else {
			// 设置Vuex登录标志位true， 默认userLogin位false
			this.$store.dispatch("userLogin", true);
			// Vuex在用户刷新的时候userLogin会回到默认值false，所以我们需要用到HTML5存储，我们设置一个名为Flag，职位isLogin的字段，作用是如果Flag有值且为isLogin的时候，证明用户已经登录了
			localStorage.setItem("Flag", "isLogin");
			this.$message.success(res.data.message);
			// 登录成功后跳转到指定页面
			this.$router.push("/home");
		}
	})

Vuex里面我是这样写的（如果项目不需要Vuex，那么直接使用HTML5储存就可以了）

export const store = new Vuex.Store({
	// 设置属性
	state: {
		isLogin: false
	},

	// 获取属性的状态
	getters: {
		isLogin: state => state.isLogin
	}

	// 设置属性状态
	mutations: {
		userStatus(state, flag) {
			state.isLogin = flag;
		}
	},

	actions: {
		// 获取登录状态
		setUser({commit}, flag) {
			commit("userStaus", flag)
		}
	}
})

在main.js里

router.beforeEach((to, from, next) => {
	// 获取用户登录成功后存储的登录标志
	let getFlag = localStorage.getItem("Flag");
	// 如果登录标志存在且为isLogin,即用户已登录
	if (getFlag === 'isLogin') {
		// 设置vuex登录状态为已登录
		store.state.isLogin = true;
		next()
		// 如果已登录，进行登录注册页面，则定向会首页
		if (!to.meta.isLogin) {
			this.$message.error('请先退出登录')
			next({ path: '/home' })
		}
	// 如果登录标志不存在，即未登录
	} else {
		// 用户想进入需要登录的页面，则定向回登录页面
		if (to.meta.isLogin) {
			next({ path: '/login' })
			this.$message.info('请先登录')
		// 用户进入无需登录的界面，则跳转继续
		} else {
			next()
		}
	}
})

这样就已经完成了Vue的登录注册，当用户关闭浏览器或者第二天再次进入网站，用户依旧可以保持着登录的状态直到用户手动退出登录