前面我们已经对没有获取token的情况进行分析，接下来我们看看如何获取token，以及获取之后我们应该怎么处理。

之前有提到，在用户登录成功之后，后台会存储token

登录之后，不仅返回了token，还有username，这个我们后面也会用到。那么接下来我们应该把token和username存储起来，因为我们也需要vuex来存放状态，所以分别存在vuex中和cookie中。

前面刚刚记录过vuex的使用，就先在vuex中进行存储啦：

我们可以试着打印一下response：

//在state中定义token和usernameconst state = {
to_ken: '',
username: ''
},
const getters = {
},
const mutations = {
//存储token和username的方法 SET_TOKEN(state, value) {
state.to_ken = value
},
SET_USERNAME(state, value) {
state.username = value
}
}
const actions = {
//异步的 login({ commit }, requestData) {
//异步，请求接口返回数据后，接着去做别的事情 /*** 接口A,接口B* B接口需要A接口的参数*/
return new Promise((resolve, reject) => { //异步: 可以通过promise，调用一个接口，成功时返回成功状态，失败时返回失败时的状态，再去调用的地方处理相应的事情 //接口 Login(requestData).then((response) => {
//这里是因为我们要的数据token这些，都在response下的data下的data里 let data = response.data.data;
//存储：login(content, requestData) content.commit('SET_TOKEN',data.token);
content.commit('SET_USERNAME', data.username);
resolve(response)
}).catch(error => {
reject(error)
})
})
},
}

vuex中存储完毕，接下来就是存在cookie中。

之前定义过getToken方法，我们可以定义set方法，username也是同理:

export function setToKen(toKen){
return cookie.set( "admin_toKen", toKen);
},
export function setUserName(value) {
return cookie.set( "username",value);
}

然后在登录成功的地方执行set方法：

return new Promise((resolve, reject) => { //异步: 可以通过promise，调用一个接口，成功时返回成功状态，失败时返回失败时的状态，再去调用的地方处理相应的事情 //接口 Login(requestData).then((response) => {
//这里是因为我们要的数据token这些，都在response下的data下的data里 let data = response.data.data;
//存储到vuex中，使用commit content.commit('SET_TOKEN',data.token);
content.commit('SET_USERNAME', data.username);
//存储到cookie中，使用我们定义的set方法，传参：data.username，data.token setToKen(data.token);
setUserName(data.username);
resolve(response)
}).catch(error => {
reject(error)
})
})
},

那么我们就把token和username存储到了cookie中：

就完成了在路由守卫的判断语句中的getToken方法，基本完成了路由守卫。不过，在路由守卫中，不仅仅只是路由的跳转，我们还可以进行许多操作，比如用户权限(这部分内容留着《vue-router路由守卫--下》来记录)

完善：

1.有一个小bug，用户登录成功进入首页，退出之后，由于cookie和vuex中已经存储了token令牌，所以就能再次非法跳转，因此我们需要进行改进：

首先，肯定是因为我们没有在用户退出之后把token删除，所以我们要写removeToken函数。

在vuex中删除，最简便的就是直接commit一个空值给set方法。

在cookie中删除的remove方法：

export function removeToKen(){
return cookie.remove("admin_toKen");
}
//顺便把username也写一下，这个不是很重要，最重要的还是我们的token令牌export function removeUserName() {
return cookie.remove("username");
}

然后在全局路由守卫中使用：

//导入store，下面的代码中要用到import store from "../store/index";

//全局路由守卫 beforeEach:路由改变都会触发router.beforeEach((to, from, next) => {
if (getToKen()) {
//如果get到了token //判断要跳转的下一个页面是不是登录页面(是不是要退出了)，用to.path if (to.path === '/login') {
//是，则调用remove方法清除token，vuex和cookie中都要清除，然后next(), removeToKen();
removeUserName();
//在vuex中删除，直接commit 一个 set方法，传空值，记得在文件中导入store store.commit('app/SET_TOKEN', '');
store.commit('app/SET_USERNAME', '');
next();
} else {
//获取用户角色 //动态分配路由权限 //在下篇再记录，先简单写一个next() next();
}
console.log("存在");
}
//如果没有token else{
//此处代码省略，这是上一篇主要记录的内容。。。。。。 }
})

2.后面我们会使用到username，比如说在页面显示用户名，就会发现当我们通过方法在vuex中存储一些别的东西的时候，username就为空，页面上不显示。那是因为，在vuex中，存储新的数据的时候，页面刷新，数据会丢失，所以我们可以这样做：

//vuex中：const state = {
to_ken: '',
//用cookie存储到的数据为初始数据，cookie中有数据则用cookie存的数据，没有则为'' username: getUserName() || ''

3. 后续我们除了getToken方法，还会需要定义存储token的set方法，以及username的get，set，remove方法，我们可以把这些都写在工具文件夹下的一个js文件中，再导入到需要用到的文件。

//一定要记得导入cookieimport cookie from "cookie_js";
const adminToKen = "admin_toKen";
const usernameKey = "username";
export function getToKen(){
return cookie.get(adminToKen);
}
export function setToKen(toKen){
return cookie.set(adminToKen, toKen);
}
export function removeToKen(){
return cookie.remove(adminToKen);
}
export function setUserName(value) {
return cookie.set(usernameKey,value);
}
export function getUserName() {
return cookie.get(usernameKey);
}
export function removeUserName() {
return cookie.remove(usernameKey);
}