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

| vue

最近在写一个重构node社区的小项目，碰到了登录的问题，实现思路如下：
① 获取用户表单信息，使用axios提交，提交成功后，把数据存在cookie,以便后续操作。

② 其中有个人信息的页面展示，获取cookie信息，判断用户是否登录，如果登录则显示内容，未登录则跳转到登录页面，所以个人信息的页面可以使用路由守卫
搜索资料时有看到这种写法，就是经过判断后去改变的动态路由来决定跳转到哪个组件，感觉稍显麻烦。

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

cookie.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//获取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,安装一下就可以使用了
例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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)
                    }
                    )
            }

        }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
beforeRouteEnter(to,from,next){
				if(to.meta.requireAuth){   //此组件需要登录
					if(getCookie('accesstoken')==null){
						next({
							path:'/login'
						})
					}else{
						next()
					}
				}else {
       			   next(); //否则不需要登录，直接进入路由
    			}
      	},

退出操作

1
2
3
4
5
6
7
8
9
//退出登录
			logout(){
				delCookie('userid') //名字要对应getCookie的值
				delCookie('accesstoken')
				delCookie('username')
		        this.$router.push({
		          path: "/login"
		        })
			}

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