vue實現登入和個人資訊元件展示

最近在寫一個重構node社群的小專案，碰到了登入的問題，實現思路如下：
1.獲取使用者表單資訊，使用axios提交，提交成功後，把資料存在cookie,以便後續操作。
2.其中有個人資訊的頁面展示，獲取cookie資訊，判斷使用者是否登入，如果登入則顯示內容，未登入則跳轉到登入頁面，所以個人資訊的頁面可以使用路由守衛
搜尋資料時有看到這種寫法，就是經過判斷後去改變<router-link>的動態路由來決定跳轉到哪個元件，感覺稍顯麻煩。
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"
                })
            }

其他操作
例如點贊和評論等功能，也要判斷使用者是否登入