主页-显示登录用户名-分析
将用户个人信息存到vuex中
在路由跳转时获取用户信息 调用actions里面函数
在actions中定义函数在函数中 调用发送用户信息请求 通过context.commit('mutations里面函数',res.data)
在mutations函数中定义函数存储用户信息和清除用户信息
获取用户名
获取用户头像
getters便捷写法
实现退出功能
1.提示询问框
2.清除token
3.清空用户信息
从哪退出登录后回到哪
定义logout() 通过element组件
通过this.$route.fullPath获取到当前路由的所以路径信息
编码处理 内置方法encodeURIComponent() 解码处理方法decodeURIComponent()
在login的index.vue中
async doLogin() {
try {
// 在组件中调用带命名空间的action
// dispatch是异步的,需要加async await
await this.$store.dispatch('user/userLogin', this.loginForm)
// 登录成功,路由跳转 获取当前页面的路径参数
+ this.$router.push(this.$route.query.return_url || '/')
} catch (err) {
alert('用户登录,失败')
console.log('用户登录,失败', err)
}
},
在navbar.vue 的logout中
logout() {
// 弹层询问,是否退出
this.$confirm('你确定要离开吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
// 确认
// 删除信息
await this.$store.dispatch('user/userLogout')
// 去到登录页
// this.$router.push('/login?return_url=当前的路径')
// 跳转路由-回登陆
// 如何获取当前页面的地址 : this.$route.fullPath
// this.$route.path只有路径的信息
// this.$route.fullPath:路径+查询参数的信息
+ this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))
}).catch(() => {
})
}
router和route
router全局路由跳转
2、$router对象
$router对象是全局路由的实例,是router构造方法的实例。
route当前路由
1、$route对象
$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
处理token失效
响应拦截器处理token失效问题
注意在响应拦截器里添加
优化路由守卫中子页跳转请求用户信息
问题跳转每个页面都会发送用户信息请求
删除多余功能和规则只留下login 404 和dashboard
创建 动态路由规则和静态路由规则
合并路由规则
新建文件
创建路由
子路由的路径path不需要加名
理解
为何添加了路由内容就会渲染到左侧列表 通过循环遍历routes动态添加
菜单中的title和图标从哪里来 通过meta中的title属性 图标通过meta中的icon属性
icon对应svg下的文件名
为什么404/login路由没有显示到左侧菜单 通过item.hidden控制