vue admin template登录权限
时间: 2023-09-12 17:12:30 浏览: 51
Vue Admin Template是一个基于Vue.js的后台管理模板,它提供了一整套完善的后台管理系统解决方案,包括登录权限控制。
首先,Vue Admin Template默认使用了vue-router来进行路由控制,可以在路由配置中设置哪些页面需要登录才能访问,哪些页面可以直接访问。例如:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import('@/views/Home'),
meta: {
requiresAuth: true // 需要登录才能访问
}
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!localStorage.getItem('token')) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
export default router
```
在上面的例子中,Home组件需要登录才能访问,而Login组件不需要登录即可访问。同时,在router.beforeEach中对路由进行拦截,如果用户没有登录则跳转到登录页面。
其次,在登录成功后,可以将token存储到localStorage中,用于在路由拦截时进行判断。例如:
```javascript
// 登录成功后保存token
localStorage.setItem('token', response.data.token)
```
最后,在退出登录时,需要清除localStorage中的token。例如:
```javascript
// 退出登录时清除token
localStorage.removeItem('token')
```
综上所述,Vue Admin Template可以通过路由控制和localStorage存储token来实现登录权限控制。