实现

下载链接 #/package/js-cookie

安装

使用

为了使用方便，将设置和添加以及移除 Cookie的方法抽离出来为公共方法。

首先在项目下新建 utils目录，在目录下新建auth.js

然后在此js中先引入js-cookie插件

然后声明一个作为存取和删除cookie的标志的key常量

然后封装并暴露方法

1. export function getToken() {

2.   return Cookies.get(TokenKey)

3. }

4.  

5. export function setToken(token) {

6.   return Cookies.set(TokenKey, token)

7. }

8.  

9. export function removeToken() {

10.   return Cookies.remove(TokenKey)

11. }

12.  

所以auth.js的完整代码

1. import Cookies from 'js-cookie'

2.  

3. const TokenKey = 'Admin-Token'

4.  

5. export function getToken() {

6.   return Cookies.get(TokenKey)

7. }

8.  

9. export function setToken(token) {

10.   return Cookies.set(TokenKey, token)

11. }

12.  

13. export function removeToken() {

14.   return Cookies.remove(TokenKey)

15. }

然后在需要用到的vue页面中对需要的方法引入，这里以获取token为例

然后就可以使用getToken获取token了

1.   if (getToken() && !isToken) {

2.     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

3.   }

你可可以不对cookie进行封装方法，在第一步安装完js-cookie后，

直接在需要对Cookie进行操作的vue页面，这里是login.vue登录页面

引入后在点击登录按钮的处理事件方法中

1.          if (this.loginForm.rememberMe) {

2.             Cookies.set("username", this.loginForm.username, { expires: 30 });

3.             Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });

4.             Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });

5.           } else {

6.             Cookies.remove("username");

7.             Cookies.remove("password");

8.             Cookies.remove('rememberMe');

9.           }

这块逻辑是如果点击了记住密码，则将用户名和密码和是否记住密码存入进Cookie

这里的密码调用了RSA加密的方式防止密码明文暴露。

具体实现可以参照下面

https://mp.csdn.net/console/editor/html/108343805

这是在点击登录按钮后点击了记住密码的操作，那么在一开始进入登录页面后就需要去获取Cookie然后

去填充进输入框

所以在login.vue页面的created函数中

1.   created() {

2.     this.getCookie();

3.   },

调用获取Cookie的方法，方法的具体实现

1.     getCookie() {

2.       const username = Cookies.get("username");

3.       const password = Cookies.get("password");

4.       const rememberMe = Cookies.get('rememberMe')

5.       this.loginForm = {

6.         username: username === undefined ? this.loginForm.username : username,

7.         password: password === undefined ? this.loginForm.password : decrypt(password),

8.         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)

9.       };

10.     },

首先是声明相应的常量来根据key获取Cookie中的数据，然后去进行是否为undefined的判断。

如果是undefined的话说明就是之前没有执行记住密码的操作，即Cookie中没有存储的用户名密码等。

那么此登录表单绑定的输入框的属性就是本身，否则的话就是从Cookie中去取用户名和密码。