最近在写一个重构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 = decodeURIComponent(document.cookie.substring(cookieStart

+ cookieName.length, cookieEnd));

}

return cookieValue;

}

//设置cookie

export function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + "=" +

encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += "; expires=" + expires.toGMTString();

}

if (path) {

cookieText += "; path=" + path;

}

if (domain) {

cookieText += "; domain=" + domain;

}

if (secure) {

cookieText += "; secure";

}

document.cookie = cookieText;

}

//删除cookie

export function delCookie(name, path, domain, secure){

setCookie(name, "", new Date(0), path, domain, secure);

}

后面发现vue有一个关于操作cookie的插件js-cookie,安装一下就可以使用了

例如

import Cookie from 'js-cookie'

const TokenKey='Admin-Token'

export function getToken(){

return Cookie.get(TokenKey)

}

export function setToken(token){

return Cookie.set(TokenKey,token)

}

export function removeToken(){

return Cookie.remove(TokenKey)

}

登录组件的login方法

methods:{

login(){

axios.post('api/v1/accesstoken',{

accesstoken:this.info

})

.then(

res=>{

const info=this.info;

setCookie('accesstoken',this.info)

setCookie('username',res.data.loginname)

setCookie('userid',res.data.id)

this.$router.push( {name:'myinfo',params:{user:res.data.loginname} } )

}

)

.catch(

err=>{

alert(err)

}

)

}

}

个人信息组件显示与否的判断

beforeRouteEnter(to,from,next){

if(to.meta.requireAuth){ //此组件需要登录

if(getCookie('accesstoken')==null){

next({

path:'/login'

})

}else{

next()

}

}else {

next(); //否则不需要登录，直接进入路由

}

},

退出操作

//退出登录

logout(){

delCookie('userid') //名字要对应getCookie的值

delCookie('accesstoken')

delCookie('username')

this.$router.push({

path: "/login"

})

}

其他操作

例如点赞和评论等功能，也要判断用户是否登录