本文实例讲述了 vue.js 中实现登录控制的方法. 分享给大家供大家参考, 具体如下:
vue 中使用 vue-router 实现登录的控制在做后台管理系统中很常见, 但是不想之前熟悉的流程那样, 不过只要大家理解 vue-router 的使用也是很好实现的.
首先我们需要编写登录页面和主页面:
- <template>
- <div class="login">
- <table width="100%" height="100%">
- <tr height="41"><td class="logintb" colspan="2"> </td></tr>
- <tr height="100%" class="loginbg">
- <td id="left_cont">
- <table width="100%" height="100%">
- <tr height="155"><td colspan="2"> </td></tr>
- <tr>
- <td width="20%" rowspan="2"> </td>
- <td width="60%">
- <table width="100%">
- <tr height="70"><td align="right"></td></tr>
- <tr height="274">
- <td valign="top" align="right">
- <img src="../../static/images/logo.png"/>
- </img/>
- </td>
- </tr>
- </table>
- </td>
- <td width="15%" rowspan="2"> </td>
- </tr>
- <tr><td colspan="2"> </td></tr>
- </table>
- </td>
- <td id="right_cont">
- <table height="100%">
- <tr height="30%"><td colspan="3"> </td></tr>
- <tr>
- <td width="30%" rowspan="5"> </td>
- <td valign="top" id="form">
- <table valign="top" width="50%">
- <tr><td colspan="2"><h4 style="letter-spacing:1px;font-size:16px;"> 管理后台 </h4></td></tr>
<tr><td > 管理员:</td><td><input type="text" v-model.trim="username" value="" /></td></tr>
<tr><td > 密 码:</td><td><input type="password" v-model.trim="pwd" value="" /></td></tr>
- <!-- <tr><td > 验证码:</td><td><input type="text" name=""value="" style="width:80px;"/></td></tr> -->
- <tr class="bt" align="center"><td> <input type="submit" @click="login" value="登陆" /></td><td> </td></tr>
- </table>
- </td>
- <td rowspan="5"> </td>
- </tr>
- <tr><td colspan="3"> </td></tr>
- </table>
- </td>
- </tr>
- <tr id="login_bot"><td colspan="2"><p>Copyright © 2017-{{getNowDate()}} Tujiawang</p></td></tr>
- </table>
- </div>
- </template>
- <script>
- import axios from 'axios'
- axios.defaults.withCredentials = true
- export default{
- data(){
- return {
- username:'',
- pwd:''
- }
- },
- methods: {
- login() {
- var params = new URLSearchParams();
- params.append('username', this.username);
- params.append('password', this.pwd);
- axios.post(this.HOST+'/home/system/login',params).then(res => {
- if(res.data.code ==1){
- sessionStorage.username = this.username;
- this.$router.push({path:'/main'})
- }else{
- alert('登录失败')
- }
- })
- },
- getNowDate(){
- var d = new Date();
- return d.getFullYear();
- }
- }
- }
- </script>
上面的登录页面注意: login 方法中登录成功需要写入 sessionStorage 以便路由进行判断
最主要的是路由文件中的内容:
- import Vue from 'vue'
- import Router from 'vue-router'
- Vue.use(Router)
- const routes = [
- {
- path: '/',
- redirect: '/login'
- },
- {
- path: '/login',
- name: 'login',
- component: (resolve)=>{require(['../components/Login'],resolve)}
- },
- {
- path: '/main',
- name: 'main',
- component: (resolve)=>{require(['../components/Home'],resolve)},
- redirect: 'main/info',
- children: [{
- path: 'info',
- meta: {
- id:-1
- },
- component: (resolve)=>{require(['../components/Main'],resolve)}
- }
- ]
- },
- {
- path: '/vips',
- name: 'vips',
- component: (resolve)=>{require(['../components/Home'],resolve)},
- redirect: 'vips/list',
- children: [{
- path: 'list',
- meta: {
- id:0
- },
- component: (resolve)=>{require(['../components/VipsList'],resolve)}
- },
- {
- path: 'detail',
- meta: {
- id:0
- },
- component: (resolve)=>{require(['../components/VipsDetail'],resolve)}
- },
- {
- path: 'userlog',
- meta: {
- id:0
- },
- component: (resolve)=>{require(['../components/UserLog'],resolve)}
- }
- ]
- }
- ];
- const router = new Router({
- routes
- });
- /**
- * to: 表示目标路由
- * from: 表示来源路由
- * next: 表示执行下一步操作
- */
- router.beforeEach((to, from, next) => {
- if (to.path === '/login') { // 当路由为 login 时就直接下一步操作
- next();
- } else { // 否则就需要判断
- if(sessionStorage.username){ // 如果有用户名就进行下一步操作
- next()
- }else{
- next({path: '/login'}) // 没有用户名就跳转到 login 页面
- }
- }
- })
- export default router
目前这个只是简单的处理, 这种方法官方叫做路由守卫, 还有一种写法就是在 meta 中添加是否需要登录的控制, 在 beforeEach 中来判断, 和上面方法一样的.
来源: http://www.jb51.net/article/138774.htm