美食杰项目 -- 登录注册（三）

前言：

本文给大家讲解，美食杰项目中 登录注册实现的效果，和具体代码。

---

具体实现思路：

1. 引入element-ui中的登录和分页功能实现方法
2. 账号密码进行双向绑定
3. 登录和注册把账号密码传递过去
4. 成功把token报错至本地，失败则返回失败的结果
5. 点击清空input框
6. 引入当前的vuex，并写出所有路由跳转
7. 使用全局导航守卫和meta字段进行登录验证判断
8. 判断跳转的路由是否需要登录，已登录则判断是否获取到用户信息
9. 未获取则删除存储至本地的 token，跳转至登录页
10. 判断是否有 token 值，没有跳转至登录
11. 判断已登录，并且跳转至登录页，跳转至首页

---

步骤：

1. 展示美食杰登录注册效果

2. 引入element-ui

点击跳转至 element-ui 中 Tabs 标签页使用方法：https://element.eleme.cn/#/zh-CN/component/tabs

点击跳转至 element-ui 中 Form 表单页使用方法：https://element.eleme.cn/#/zh-CN/component/form

---

3. 代码

• 路由跳转页（router）

import Vue from 'vue'
import VueRouter from 'vue-router'
// import home from '@/components/home.vue'
import { userInfo } from '@/connector/api'
// 引入当前的vuex
import store from '@/store/index'
Vue.use(VueRouter)

const routes = [    
  {
    path: '/',
    name: 'home',
    title: '首页',
    component: ()=>import('@/components/home.vue'),
    children: [
      {
        path: '',
        name: 'page',
        alias: 'page',
        title: '首页',
        component: ()=>import('@/views/home-page/index'),
      },
      {
        path: 'recipes',
        name: 'recipes',
        title: '菜谱大全',
        component: () => import('@/views/Daquan-recipes/index'),
      },
      {
        path: 'login',
        name: 'login',
        title: '登录',
        component: ()=>import('@/views/login/index'),
      },
      {
        path: 'DishesInformation',
        name: 'DishesInformation',
        title: '菜谱详情',
        component: () => import('@/views/DishesInformation/index'),
      },
      {
        path: 'MyHomepage',
        name: 'MyHomepage',
        title: '个人主页',
        redirect: { name: 'works' },
        component: () => import('@/views/MyHomepage/index'),
        meta:{
          IsLogin: true,
        },
        children: [
          {
            path: 'works',
            name: 'works',
            title: '作品',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'collection',
            name: 'collection',
            title: '收藏',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'fans',
            name: 'fans',
            title: '粉丝',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
          {
            path: 'following',
            name: 'following',
            title: '关注',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
        ]
      },
      {
        path: 'PublishRecipes',
        name: 'PublishRecipes',
        title: '发布菜谱',
        component: () => import('@/views/PublishRecipes/PublishRecipes'),
        // 路由元信息，加上可以用来判断是否需要登录
        meta:{
          IsLogin: true,
        }
      },
      {
        path: 'personal',
        name: 'personal',
        title: '编辑个人资料',
        component: () => import('@/views/personal/index'),
      }
    ]
  },
  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// meta为路由元信息，加上可以用来判断是否需要登录
// 路由守卫
router.beforeEach(async (to, from, next) => {
  // 获取存储至本地的 token 验证
  let token = localStorage.getItem('token')
  // 判断是否有值（!!token 返回 true 和 false）
  let islogin = !!token
  // 获取用户信息
  let user = await userInfo()
  // 存储至 vuex
  store.commit('userInfo', user.data)
  // 判断跳转的路由是否需要登录（meta 路由元信息）
  if (to.matched.some((item) => item.meta.IsLogin)) {
    // 判断是否获取到用户信息
    if (user.error == 400) {
      // 删除存储至本地的 token
      localStorage.removeItem('token')
      // 跳转至登录页
      window.location.href = '/login'
    } else {
      // 判断是否有 token 值
      if (islogin) {
        next()
      } else {
        // 没有跳转至登录
        window.location.href = '/login'
      }
      
    }
  } else {
    // 判断已登录，并且跳转至登录页
    if (islogin && to.path === '/login') {
      // 跳转至首页
      window.location.href = '/'
      return
    }
    next()
  }
})

export default router
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

---

• 登录注册的根页面

登录注册页大致相同，只需要把接口进行改变，其他的都可以直接复制过去

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

---

• 登录页

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

---

• 注册页

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

---

总结：

总结：
以上就是 美食杰项目 中 登录注册的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog