vue展示信息卡片_vue实现登录和个人信息组件展示

最近在写一个重构node社区的小项目，碰到了登录的问题，实现思路如下：

1.获取用户表单信息，使用axios提交，提交成功后，把数据存在cookie,以便后续操作。

2.其中有个人信息的页面展示，获取cookie信息，判断用户是否登录，如果登录则显示内容，未登录则跳转到登录页面，所以个人信息的页面可以使用路由守卫

搜索资料时有看到这种写法，就是经过判断后去改变的动态路由来决定跳转到哪个组件，感觉稍显麻烦。

3.退出操作，清除cookie

可以把操作cookie的代码放到一个单独的src/utils/cookie.js文件，utils这个文件夹可以放一些工具类的文件

cookie.js

//获取cookie

export function getCookie(name){

var cookieName = encodeURIComponent(name) + "=",

cookieStart = document.cookie.indexOf(cookieName),

cookieValue = null;

if (cookieStart > -1){

var cookieEnd = document.cookie.indexOf(";", cookieStart);

if (cookieEnd == -1){

cookieEnd = document.cookie.length;

}

cookieValue = decodeUR